javascript fields calculation of multiple fields

Question

I am using this code this is html form where i need the javascript onblur calculation of qty * rate = amount

<div>
    <p>
        <input type="button" value="Add Product" onClick="addRow('dataTable')" />
        <input type="button" value="Remove Product" onClick="deleteRow('dataTable')" />
    </p>
    <table style="width: 100%;" id="dataTable" class="responstable" border="1">
        <tbody>
            <tr>
                <p>
                <td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
                <td><input type="text" name="prod" maxlength="100" placeholder="Product *" required></td>
                <td>
                    <input type="number" name="qty[]]" maxlength="10" placeholder="QUANTITY *" required>
                </td>
                <td>
                    <input type="number" step="0.01" name="rate[]" maxlength="10" placeholder="RATE *" required>
                </td>
                <td>
                    <input type="number" step="0.01" name="amt[]" placeholder="AMOUNT *" required>
                </td>
                </p>
            </tr>
        </tbody>
    </table>
</div>

And this is Javascript code i am using for add input fields

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if(rowCount < 25){                          // limit the user from creating fields more than your limits
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        }
    }else{
         alert("Maximum Limit is 25.");

    }
}

function deleteRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    for(var i=0; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
            if(rowCount <= 1) {                         // limit the user from removing all the fields
                alert("Cannot Remove all the Products.");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
}

I need also auto calculation of total amount. I know it is done by using input field id but here the problem is i don't know how to add different input field ID when i click add product here the same id comes on next input field so what is the best solution for this.

Answer 1

Try this fiddle for dynamic added elements jsfiddle.net/bharatsing/yv9op3ck/2/

HTML:

<div>
<p> 
<input type="button" value="Add Product" id="btnAddProduct"  /> 
<input type="button" value="Remove Product" id="btnRemoveProduct" /> 
<label>Total Amount:</label><label id="lblTotal">0</label>
</p>
<table style="width: 100%;"  id="dataTable" class="responstable" border="1">
<tbody>
<tr>
<p>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td><input type="text" name="prod" maxlength="100" placeholder="Product *" required></td>
<td>
<input type="number" name="qty[]" maxlength="10" placeholder="QUANTITY *" required>
</td>
<td>
<input type="number" step="0.01" name="rate[]" maxlength="10" placeholder="RATE *" required>    
</td>
<td>
<input type="number" step="0.01" name="amt[]" placeholder="AMOUNT *" required>    
</td>
</p>
</tr>
</tbody>
</table>
</div>

Javascript/jQuery:

$("#btnAddProduct").click(function(){
     addRow('dataTable');
});

$("#btnRemoveProduct").click(function(){
     deleteRow('dataTable');
});

function CalculateAll(){
     $('input[name="rate[]"]').each(function(){
        CalculateAmount(this);
     });

     var total=0;
      $('input[name="amt[]"]').each(function(){
           total+= parseFloat($(this).val());
     });
     $("#lblTotal").html(total);
}

$(document).on("blur",'input[name="qty[]"]',function(){
     CalculateAmount(this);
});

$(document).on("blur",'input[name="rate[]"]',function(){
     CalculateAmount(this);
});

var totalAll=0;
function CalculateAmount(ctl){
   var tr=$(ctl).parents("tr:eq(0)");
   var qty=parseFloat($(tr).find('input[name="qty[]"]').val());
   var rate=parseFloat($(tr).find('input[name="rate[]"]').val());
   var amount=qty*rate;   
   $(tr).find('input[name="amt[]"]').val(amount);

   if(!isNaN(amount)){
     totalAll= totalAll + amount;   
     $("#lblTotal").html(totalAll);
   }
}

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if(rowCount < 25){                          // limit the user from creating fields more than your limits
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        }
    }else{
         alert("Maximum Limit is 25.");

    }
}

function deleteRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    for(var i=0; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
            if(rowCount <= 1) {                         // limit the user from removing all the fields
                alert("Cannot Remove all the Products.");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }

    CalculateAll();
}

Answer 2

Since in your code you are only using JavaScript. Here is an attempt with JavaScript. You need not to have ID attribute only to calculate the total amount , you can give your amount element a class amount and use it to get sum on all the elements having this class.

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if(rowCount < 25){                          // limit the user from creating fields more than your limits
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        }
    }else{
         alert("Maximum Limit is 25.");

    }
}

function deleteRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    for(var i=0; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
            if(rowCount <= 1) {                         // limit the user from removing all the fields
                alert("Cannot Remove all the Products.");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
}

function amount(event)
{
  
var rate  =parseInt(event.target.value, 10);
var qty = parseInt(event.target.parentElement.previousElementSibling.querySelector("input").value, 10);
  

event.target.parentElement.nextElementSibling.querySelector("input").value = rate * qty;
  
}

function calculate()
{
  var total = 0;
  document.querySelectorAll(".amount").forEach(function(elem)
  {
    total = total + parseInt(elem.value,10);
  });
  
 alert(total);
}

<div>
<p> 
<input type="button" value="Add Product" onClick="addRow('dataTable')" /> 
<input type="button" value="Remove Product"onClick="deleteRow('dataTable')"  /> 
</p>
<table style="width: 100%;"  id="dataTable" class="responstable" border="1">
<tbody>
<tr>
<p>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td><input type="text" name="prod" maxlength="100" placeholder="Product *" required></td>
<td>
<input type="number" name="qty[]]"  maxlength="10" placeholder="QUANTITY *" required>
</td>
<td>
<input type="number" step="0.01" onBlur="amount(event)" name="rate[]" maxlength="10" placeholder="RATE *" required>    
</td>
<td>
<input type="number" step="0.01" class ="amount" name="amt[]" placeholder="AMOUNT *" required>    
</td>
</p>
</tr>
</tbody>
</table>
  
<button onClick="calculate()">Total</button>
</div>