[SalesForce] LWC – How to get input value in HTML table on button save event

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.

Best Answer

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

Related Topic