0

Hi i have iterative table which is consist of two iteration inside i need to take inside input value by click the submit button . NOTE : this is HTML Dynamic Table

 <template for:each={Products} for:item="tableitem" for:index="indexVariable">
            <div class="slds-m-bottom_large" key={tableitem.Id}  index={indexVariable}>
               
                <table aria-describedby="conatact-list" class="slds-table  slds-table_bordered " >
                    <thead>
                        <tr class="slds-line-height_reset">
                            <th class="slds-size_1-of-4 " scope="col">
                                <div class="slds-truncate " title="Product Name">Product Name</div>
                            </th>
                            
                            <th class="slds-size_1-of-4 " scope="col">
                                <div class="slds-truncate " title="Quantity">Quantity</div>
                            </th>
                          
                        </tr>
                    </thead>
                    <tbody>
                      
                        <template for:each={tableitem.data} for:item="item" key={item.Id} for:index="indexVar">
                            <tr key={item} class="slds-hint-parent objpick" >
                                <td class="slds-size_1-of-4">
                                    <div>
                                    {item.Product}
                                    </div>
                                </td>
                                
                                <td class="slds-size_1-of-4">
                                    <div>
                                     
                                     
                                       <lightning-input name={item} data-index={indexVar}   data-field-api-name="Quantity" type="Number"   onfocusout={handleListInputChange}></lightning-input>
                                        
                                    </div>
                                </td>
                                
                            </tr>
                                 
                                 
                        </template>
                    </tbody>
                </table>
                 
                <lightning-button index={indexVariable}  data-whichrow={tableitem.Id}  class="objpick" key={tableitem.Id}  id={tableitem.category} label="Submit" onclick={submitDetails}></lightning-button>
                
            </div> 
        </template>

js function

 handleListInputChange(event)
{
   
const itemIndex = event.currentTarget.dataset.index;
 const product = this.products.map(e=>e.data)
     

    product[itemIndex].Quantity= event.target.value;

}

In the submit button i need to take the input values of iterative Products.I don't know how to take for plain HTML element using LWC? Appreciate your thoughts and response.

1

first, you need to add an identifier (a class, a custom attribute) something, so you can easily Access Elements the Component Owns, for all values, you probably want to use querySelectorAll.

you would use a query selector as you would for any html document. however, instead of document, you would be using this.template

2
  • thanks for your response but I'm literally new to LWC .can you help me to get the entered values inside the submit button event . If possible. Anticipate your positive response. Oct 13 at 17:47
  • please refer to the documentation on how to access components. If you are new to LWC, the best place to learn these things is through Trailheads. there are plenty of modules to help you understand the basics with sample projects
    – glls
    Oct 13 at 18:22
0

You can use indexes of both iteration to specify unique selectors for each element. And later on submit you can use them to select particular inputs from a table's row. The idea would be something like, .html

<template>
    <div class="app table__form slds-card">
        <template for:each={products} for:item="product" for:index="tableIndex">
            <table key={product.Id} data-table-id={tableIndex}>
                <template for:each={product.data} for:item="row" for:index="rowIdx">
                    <tr key={row.id} data-row-id={rowIdx}>
                        <td class="slds-grid slds-grid-vertical_align">{row.Name}</td>
                        <td>
                            <lightning-input label="Input" variant="label-hidden"></lightning-input>
                        </td>
                    </tr>
                </template>
            </table>
        </template>
        <button class="slds-m-vertical_small slds-align_absolute-center slds-button slds-button_brand" onclick={handleSubmit}>Submit</button>
    </div>
</template>

.js

handleSubmit(){
        //all inputs within the component
        [...this.template.querySelectorAll('lightning-input')].forEach((input, idx) => `${idx}: ${console.log(input.value)}`);
        // any particular table's row
        const input = this.template.querySelector('.table__form table[data-table-id="1"] tr[data-row-id="0"] lightning-input');
        console.log(`Second input has value ${input.value}`);
      }

I've also created a play ground example which you can refer here. If you still didn't get idea you probably should start from trailhead or the link shared by glls.

4
  • How to get [data-table-id="1"] instead of one need to get dynamically based on button click ? Oct 14 at 12:09
  • You can place data these attributes on input as well. And you can get it like input.getAttribute('data-table-id') & input.getAttribute('data-field-id'). Oct 14 at 12:39
  • if you don't mind can you provide playground so i got to know how you have done. Oct 14 at 12:44
  • Updated smae playground example. Oct 17 at 15:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.