add new rows, jQuery code doesn't work

Question

I have a table and with one row and a button. While clicking a button it loads the another row. and I have a function to do some calculations. And, I need to show the sum of all total values in total column. before add a row it works fine. But after adding the new row calculations doesn't work.

my code is here

<table class="table" id="boq_tbl">
        <thead>

          <th>Work Product Id</th> 
          <th>Cost Code</th>
          <th>Work Item Description</th> 
          <th>Quentity</th>
          <th>Unit</th>
          <th>Laboure-Hrs</th>
          <th>Labour Cost</th> 
          <th>Others</th>
          <th>Total</th>

       <thead>

            <tbody>
    <tr class="txtMult">

        <td><input type="text" name="work_product_id" class="form-control" id="work_product_id" placeholder=""></td>
        <td><input type="text" name="cost_code" class="form-control" id="cost_code" placeholder=""></td>
        <td><input type="text" name="work_item_description" class="form-control" id="work_item_description" placeholder=""></td>
        <td><input type="text" name="quentity" id="val1" class="form-control" /></td>
        <td><input type="text" name="unit" id="val2" class="form-control"/></td>
        <td><input type="text" name="laboure_hrs" id="val3" class="form-control" /></td>
        <td><input type="text"name="laboure_cost" id="val4" class="form-control"/></td>
        <td><input type="text" name="others" class="form-control" id="others" placeholder=""></td>


        <td>
                <span class="multTotal">0.00</span>
        </td>
    </tr>

     </tbody>
       </table> 
<p align="right">
    Grand Total# <span id="grandTotal">0.00</span>
</p>

Add

js

    <script>
$("#insert-more").click(function () {
     $("#boq_tbl").each(function () {
         var tds = '<tr>';
         jQuery.each($('tr:last td', this), function () {
             tds += '<td>' + $(this).html() + '</td>';
         });
         tds += '</tr>';
         if ($('tbody', this).length > 0) {
             $('tbody', this).append(tds);
         } else {
             $(this).append(tds);
         }
     });
});

</script>


<script>

 $(document).ready(function () {
       $(".txtMult input").keyup(multInputs);

       function multInputs() {
           var mult = 0;
           // for each row:
           $("tr.txtMult").each(function () {
               // get the values from this row:
               var $val1 = $('#val1', this).val();
               var $val2 = $('#val2', this).val();
               var $val3 = $('#val3', this).val();
               var $val4 = $('#val4', this).val();
               var $total = ($val1 * $val2 ) + ($val3 * $val4);
               $('.multTotal',this).text($total);
               mult += $total;
           });
           $("#grandTotal").text(mult);
       }
  });




</script>

ID's must be unique in a page by definition. Use event delegation to account for future elements being added — charlietfl
– charlietfl, Commented Aug 15, 2015 at 12:05

Zakaria Acharki · Accepted Answer · 2015-08-15 12:41:32Z

1

Your code work fine after several changes, Take a look at Working FIDDLE.

Replace ids by class (ID's must be unique in a page by definition), e.g :

<td><input type="text" name="quentity" class="form-control val1" /></td>
<td><input type="text" name="unit" class="form-control val2"/></td>
<td><input type="text" name="laboure_hrs" class="form-control val3" /></td>
<td><input type="text" name="laboure_cost" class="form-control val4"/></td>

Replace them also by class in javascript :

$("tr.txtMult").each(function () {
       // get the values from this row:
       var $val1 = $('.val1', this).val();
       var $val2 = $('.val2', this).val();
       var $val3 = $('.val3', this).val();
       var $val4 = $('.val4', this).val();
       var $total = ($val1 * $val2 ) + ($val3 * $val4);
       $('.multTotal',this).text($total);
       mult += $total;
});

To deal with fresh trs added dynamiclly to the DOM you have to replace this line :

$(".txtMult input").keyup(multInputs);

By :

$("#boq_tbl").on("keyup", ".txtMult input", multInputs);

Add class txtMult to the new tr added on click event :
```
var tds = '<tr class="txtMult">';
```

answered Aug 15, 2015 at 12:41

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ashik Over a year ago

i want to save values in to db where we calculate called total and grand total.so i want to calculate it in the input field.i have tried that.but doesn't work. can u help me plz

Zakaria Acharki Over a year ago

Ok brother post another question for that and tag me in, i'll see what i can do.

Lajos Arpad · Accepted Answer · 2015-08-15 12:30:45Z

1

Your code of

$(".txtMult input").keyup(multInputs);

attaches the event to the already existent inputs inside elements, having txtMult class. The following code will work for any new inputs, inside any new row:

$("#boq_tbl").on("keyup", ".txtMult input", multInputs);

This way, the only tag you need to exist upon the handler attachment is the tag having the id of boq-tbl, providing the context.

answered Aug 15, 2015 at 12:30

Lajos Arpad

80.4k42 gold badges123 silver badges234 bronze badges

1 Comment

ashik Over a year ago

calculations doesn't work when i adding new row,it shows previous result

Collectives™ on Stack Overflow

add new rows, jQuery code doesn't work

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related