Malinda weerasinghe Malinda weerasinghe - 4 months ago 32
jQuery Question

Get total from table input as grand total in jquery?

I created a simple stock saving table for my project. Also i added a button to add row to my table.this is my table,

[add button]
+---------------+-----------+-----------+
+ lense type + qty + total +
+---------------+-----------+-----------+
+ + + +
+---------------+-----------+-----------+
+ grand total : LKR +
+---------------------------------------+


EDIT

I added html code of the table,

<table class="table" id="tbl-add-lense">
<thead style="background-color:#f5edff;">
<th style="width:2%;"><input type="checkbox" name="chk_in" id="checkall"></input></th>
<th style="width:2%;">item no</th>
<th style="width:5%;">Lense Type</th>
<th style="width:5%;">Unit price</th>
<th style="width:5%;">Quantity</th>
<th style="width:5%;">Total</th>
</thead>
<tbody id="tbl-lesne-body">
<tr id="addr0">
<td><input type="checkbox" name="chk_in"></input></td>
<td>1</td> <td><input name='tb-lense-type1' type='text' placeholder='Lense Type' class='form-control '/> </td>
<td><input name='td-lunit1' type='number' placeholder='0' class='form-control'></td>
<td><input name='td-lqty1' type='number' placeholder='0' class='form-control'></td>
<td><input name='tb-ltotal1' type='number' placeholder='00.00' class='form-control total'></td>

</tr>

</tbody>
<tfooter></tfooter>
</table>


This table has one row. I used add button to add more rows. add row button code,

$("#add-lense-row").click(function(){

$("#tbl-lesne-body").append("<tr id='addr"+(i+1)+"'><td><input type='checkbox' name='chk_in'></input></td><td>"+ (i+1) +"</td> <td><input name='tb-lense-type"+i+"' type='text' placeholder='Lense Type' class='form-control '/> </td> <td><input name='td-lunit"+i+"' type='number' placeholder='0' class='form-control'></td><td><input name='td-lqty"+i+"' type='number' placeholder='0' class='form-control'></td><td class='tot'><input name='td-ltotal"+i+"' type='number' placeholder='00.00' class='form-control total'></td></tr>");

i++;

});


total
<td>
has a
input
,

<input name='tb-ltotal1' type='number' placeholder='00.00' class='form-control total'>


I need to get sum of total td inputs when typing on a input. I tried this code,

$(".total").keyup(function(){
console.log('Typing');
sum += parseFloat($(this).val());
});


but it only working on the first table row. If i add a new row and try this code. It's not working. I removed
sum += parseFloat($(this).val());
line and tried. Still code working only in the first row. How to solve this. Thank you

Answer

Your code needed some corrections:

  1. You were only getting the value of input that triggered the 'keyup' event, as the sum. But you needed to loop through all inputs with class total and add the values of all to get the grand total.
  2. As only the first row was added through html and rest of the rows were being added dynamically through javascript/jquery, your normal event binding worked only for the first row. For dynamically generated elements i.e. the elements which were not there when the page first loaded, you need to use slightly different syntax for event binding e.g. $(document).on("keyup", ".total", function(){}). By binding events dynamically in this way, keyup event now fires on all inputs.

    $(document).on("keyup", ".total", function(){
    
    console.log('Typing');
    var sum = 0;
    $(".total").each(function(index){
    sum += parseFloat($(this).val()); 
    });//each
    
    console.log( sum );
    
    });//keyup`
    
Comments