get multiplication of two inputs and put it in another input with javascript-CodePudding

Preveiw1, here 'Total' fields are empty without auto multiplication

Preveiw2, Here I fill the multiplication by myself

this function collect all 'total' inputs of all rows and store the result it in another input.

var arr = document.getElementsByName('total[]');
    var tot=0;
    for(var i=0;i<arr.length;i  ){ 
 //HERE before start collect total input value we need first to store the multiplication of QTE & PU. 
        if(parseFloat(arr[i].value))
            tot  = parseFloat(arr[i].value); // here we collect all total input values
    }

    document.getElementById('Amount_Commission').value = tot; // store result

this function is work well if I fill the total input by myself , but I need to do that with Js.

-this is one row for my form , the button ( ) call JS function to generate another row with same attributes to store multiple row.

            <td><input type="text" name="QTE[]" id="QTE" class="form-control"></td>
            <td><input type="text" name="PU[]" id="PU" class="form-control"></td>
            <td><input type="text" class="form-control form-control-lg" name="total[]" id="totali" 
             readonly ></td>
            <td><button type="button" id="add_btn" class="btn btn-primary"> </button></td> //generate another row
</tr>

Add new row function

$(document).ready(function(){
$('#add_btn').on('click', function(){

    var html='';
    html='<tr>';
    html ='<td><input type="text" name="designation[]" class="form-control"></td>';
    html ='<td><input type="text" name="QTE[]" id="QTE" class="form-control"></td>';
    html ='<td><input type="text" name="PU[]" id="PU" class="form-control"></td>';
    html ='<td><input type="text" class="form-control form-control-lg" name="total[]" id="totali" readonly ></td>';
    
    html ='<td><button type="button"   id="remove" class="btn btn-danger">-</button></td>';
    html ='</tr>';
    $('tbody').append(html);

})
});

$(document).on('click', '#remove',function(){
    $(this).closest('tr').remove();
});

CodePudding user response：

There are problems with your form the main one is ids. ids should be unique in the entire page while any time user clicks on the button you create a duplicate id for inputs. (my understanding of your form structure.)

The solution is to add a number to the end of inputs id: QTE1, PU1, totali1 Then in your loop

const QTEValue = document.getElementById('QTE' i).value
const PUValue = document.getElementById('PU' i).value
const resultOfCalculation = QTEValue * PUValue
document.getElementById('totali' i).value = resultOfCalculation

This should update the total input in the loop. Let me know if it didn't work

Note: you can do it using tagName by creating lists of inputs QTEArr, PUArr, and totaliArr. Then loop through them but it's very inefficient and loops through three arrays multiple times which may cause memory leakage in huge forms.

Update: Change row generation function to add numerical id as below.

$(document).ready(function(){
  let incrementalRow = 1
  $('#add_btn').on('click', function(){

      let html='';
      html='<tr>';
      html ='<td><input type="text" name="designation[]" class="form-control"></td>';
      html ='<td><input type="text" name="QTE[]" id="QTE' incrementalRow '" class="form-control"></td>';
      html ='<td><input type="text" name="PU[]" id="PU' incrementalRow '" class="form-control"></td>';
      html ='<td><input type="text" class="form-control form-control-lg" name="total[]" id="totali' incrementalRow '" readonly ></td>';

      html ='<td><button type="button" id="remove' incrementalRow '" class="btn btn-danger">-</button></td>';
      html ='</tr>';
      
      $('tbody').append(html);
      incrementalRow  ;

  })
});
$(document).on('click','[id^=remove]',function(){
    $(this).parent().parent().remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table>
  <tbody>
  </tbody>
  <button type="button" id="add_btn" class="btn btn-primary"> </button>
</table>