Advertisement

Multiplying inputs with dynamic add

OlegB

asked 26 Mar, 2021

I have 3 fields with inputs:

<div class="row">
<input onblur="calc_basic_amount();" id="rate_basic"></input>
<input onblur="calc_basic_amount();" id="qty_basic"></input>
<input id="basic_amount"></input>
</div>

Multiply rate_basic by qty_basic with js:

function calc_basic_amount(){
       var qty_basic = document.getElementById('qty_basic').value;
     var rate_basic = document.getElementById('rate_basic').value;
         var basic_amount = (qty_basic * rate_basic);
         document.getElementById('basic_amount').value = basic_amount.toFixed(2);
}

It works fine, but I have a button that add a row with the same inputs and the same id, but the calculation only works with the first row. How to make it work with all inputs? thanks

Add function to row:

function add_row_to_table() {

        table_row += '<td><input id="qty_basic" type="number" min="0" onblur="calc_basic_amount();" onchange="calc_basic_amount();" data-quantity name="newitems[' + item_key + '][qty]" value="' + data.qty + '" class="form-control">';

        table_row += '<input type="text" placeholder="' + app.lang.unit + '" name="newitems[' + item_key + '][unit]" class="form-control input-transparent text-right" value="' + data.unit + '" >';

        table_row += '</td>';

        table_row += '<td class="rate"><input id="rate_basic" type="number" data-rate data-toggle="tooltip" title="' + app.lang.item_field_not_formatted + '" onblur="calc_basic_amount();" data-rate onchange="calc_basic_amount();" name="newitems[' + item_key + '][rate]" value="' + data.rate + '" class="form-control"></td>';

        table_row += '<td class="amount_basic" align="right"><input id="basic_amount" class="form-control"></td>';

        table_row += '<td><a href="#" class="btn btn-danger pull-right" onclick="delete_item(this,' + itemid + '); return false;"><i class="fa fa-trash"></i></a></td>';

        table_row += '</tr>';
}

Advertisement

Answer

You should add dynamic id

<div class="row">
<input onblur="calc_basic_amount(1);" id="rate_basic1"></input>
<input onblur="calc_basic_amount(1);" id="qty_basic1"></input>
<input id="basic_amount1"></input>
</div>

Now when you create New Row

<div class="row">
<input onblur="calc_basic_amount(2);" id="rate_basic2"></input>
<input onblur="calc_basic_amount(2);" id="qty_basic2"></input>
<input id="basic_amount2"></input>
</div>

function calc_basic_amount(id){
       var qty_basic = document.getElementById('qty_basic'+id).value;
       var rate_basic = document.getElementById('rate_basic'+id).value;
       var basic_amount = (qty_basic * rate_basic);
       document.getElementById('basic_amount'+id).value = basic_amount.toFixed(2);
}

https://codepen.io/flakerimi/pen/xxgVpWR I have simplified a bit but you get the idea.

var table = document.getElementById('myTable');
            var rowCount = table.rows.length;
function addRow() {
  currentNum = rowCount+1;
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  cell1.innerHTML = '<input onblur="calc_basic_amount('+currentNum+');" id="rate_basic'+currentNum+'" />';
  cell2.innerHTML = '<input onblur="calc_basic_amount('+currentNum+');" id="qty_basic'+currentNum+'"/>'; 
  cell3.innerHTML = '<input id="basic_amount'+currentNum+'"/>';
  rowCount++;
}

 function calc_basic_amount(id){
       var qty_basic = document.getElementById('qty_basic'+id).value;
       var rate_basic = document.getElementById('rate_basic'+id).value;
       var basic_amount = (qty_basic * rate_basic);
       document.getElementById('basic_amount'+id).value = basic_amount.toFixed(2);
}

table, td {
  border: 1px solid black;
}

<p>Click the buttons to create and delete row(s) for the table.</p>

<table id="myTable">
  <tr>
    <td><input onblur="calc_basic_amount(1);" id="rate_basic1" /></td>
 <td><input onblur="calc_basic_amount(1);" id="qty_basic1"/></td>
 <td><input id="basic_amount1"/></td>


  </tr>

</table>
<br>

<button onclick="addRow()">Create row</button>

 <script>

</script>

Advertisement