Sum up input field value inside iterative Table in LWC

arraylightning-web-components

I have an iterative table contains input field onchange event i need to sum up the value of the iterative input box ?

  <table aria-describedby="conatact-list" class="slds-table slds-table_cell-buffer slds-table_bordered ">
                <!--Header of the table-->
                <thead>
                    <tr class="slds-line-height_reset">
                        
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Prdt">Prdt</div>
                        </th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Quantity">Quantity</div>
                        </th>
                        
                       
                    </tr>
                </thead>

                <!--Body of the table-->
                <tbody>
                    <template for:each={PrdtList} for:item="item" for:index="indexVar">
                        <tr key={item.recId} class="slds-hint-parent">
                           
                           
                             <td class="slds-truncate">
                                <div>
                                    {item.ProdName}
                                </div>
                            </td> 
                            
                            <td class="slds-truncate">
                                <div>
                                    <input type="number"  data-index={indexVar}  data-target-id={item.Qty}  onchange={handleQtyChange}></input>
                       
                                </div>
                            </td> 
                            
                          
                        </tr>
                    </template>
                    
                </tbody>
            </table>

handleQtyChange(event)
  {
    const value = event.target.value;
   
   
      const TotalList = JSON.parse(JSON.stringify(this.PrdtList))
     
        this.totalVal=TotalList.reduce(function(accum, val) {
                        console.log('accum',accum)
                        return accum + Number(value)}, 0);
                    
  }

If suppose in the list contains two input fields then those two input fields needs to be added and store in totalVal.My approach is not working? what i have done wrong ? Please guide me.

Expected result:
if 1st input value in the list if i enter is 6
and 2nd input value in the list i enter 4 then totalVal become 6+4=10.

Best Answer

You have a small mistake in your markup:

<div>
    <input type="number"  data-id={item.recId} value={item.Qty}  onchange={handleQtyChange}></input>
</div>

Now, having the record Id, you can:

  handleQtyChange(event) {
    this.PrdtList.find(
      (record) => record.recId === event.target.dataset.id)
      .Qty = parseFloat(event.target.value)
    this.totalVal = this.PrdtList.reduce((p,v) => p + v.Qty, 0)
  }

Demo.

Related Solutions

[SalesForce] Track Input value in LWC

You can use a single handler to capture the values in all of your inputs.

Here is my favorite approach that has 0 maintenance once you put it in, all you need to know is what "Field" and what "Value" and you can pump an object full of this information, just like a map with key and value.

Uncommented Solution:

@track theRecord = {};

handleFormInputChange(event){
    this.theRecord[event.target.name] = event.target.value;
}

<lightning-input type="time" name="FirstName" label="First Name"
                                        onchange={handleFormInputChange}
                                        class="formInput"></lightning-input>

This uses an object and bracket notation to assign the data to the correct object property.

I've used this many times to keep changes easy, adding fields to HTML and logic to JS without having to touch the handler.

Commented Solution:

// define your object, it'll look just like an sobject in the end
@track theRecord = {};

handleFormInputChange(event){
    // In 1 line, assign the value to the property
    this.theRecord[event.target.name] = event.target.value;
    console.log(event.target.name + ' now is set to ' + event.target.value);
}


// example: 
      // event.target.name == 'FirstName'
      // event.target.value == 'Mike'
      
      // End result: 
        // this.theRecord.FirstName = 'Mike';
        // Dynamically created a new property for theRecord... it'll look like this:
        // this.theRecord = {FirstName: 'Mike'};

    // see the full structure of our object as it grows
    // console.log('theRecord: ' + JSON.stringify(this.theRecord, null, '\t'));


html: 

<div>See output like {theRecord.FirstName} {theRecord.MiddleName} {theRecord.LastName}</div>

<lightning-input type="time" name="FirstName" label="First Name"
                                        onchange={handleFormInputChange}
                                        class="formInput"></lightning-input>

<lightning-input type="time" name="MiddleName" label="Middle Name"
                                        onchange={handleFormInputChange}
                                        class="formInput"></lightning-input>

<lightning-input type="time" name="LastName" label="Last Name"
                                        onchange={handleFormInputChange}
                                        class="formInput"></lightning-input>

[SalesForce] How to use input field value in LWC

The reason you are not able to get percentage is because the wired data is immutable. So, you can get the clone as below after which it should work:

if (data) {
    this.lineItemData = [...data];
}

I assume data here is the list of records and so using [...]

You do not need key on all tds .
Even if you use label-hidden variant, you need to put label for lightning-input .
You do not need value on the column percentageValue as you should collect and modify corresponding row in lineItemData .
You should use some identifier like data-key to know which row is being modified. Then in the change handler you can assign to exactly that row data field .

HTML:

<td>
    <lightning-input variant="label-hidden" data-key={lineItem.key} label="percentageValue" type="number" onchange={PercentageChange}>
    </lightning-input>
</td>

JS:

PercentageChange(event) {
    this.lineItemData
        .find(item => item.key === event.currentTarget.dataset.key)
        .percentage = event.target.value;
}

Here is the playground link that I created for you.

Best Answer

Related Solutions

[SalesForce] Track Input value in LWC

[SalesForce] How to use input field value in LWC

Related Topic