Calculation for input array in every row Jquery

Question

I am new into JQuery, My code is only working for the first row, it doesn't calculate for other rows. I have two button, one for adding another row and one for deleting it. What I try to do it to calculate price+vat*quantity and put it in total field in every row. here if the code for my html

<table border='1' id="mytable" dir="rtl" style='border-collapse: collapse;'>
    <thead>
        <tr>
            <th> partnumber </th>
            <th>name</th>
            <th>price </th>
            <th>vat</th>
            <th>quantity</th>
            <th> price + vat</th>
            <th> total quantity*(price+vat) </th>
            <th> </th>

        </tr>
    </thead>
    <tbody>
        <tr class='tr_input'>
            <td><input type='text' name="partnumber[]" class='username' id='partnumber_1' placeholder='پارت نه‌مبه‌ر '></td>
            <td><input type='text' class='name' name="name[]" id='name_1' ></td>
            <td><input type='text' class='price' name="price[]" id='price_1' ></td>
            <td><input type='text' class='vat' name="vat[]" id='vat_1' ></td>
            <td><input type='text' class='quantity' name="quantity[]" id='quantity_1' ></td>
            <td><input type='text' class='amount' name="amount[]" id='amount_1' ></td>
            <td><input type='text' class='total'  name="total[]" id='total_1' ></td>
        </tr>
    </tbody>
</table>
<br>
<input type='button' value='Add fields' id='addmore' class="btn btn-success">
<input type='button' value='remove' id='remove' class="btn btn-danger">

Here is the screenshot for the interface.

And this is JS code for adding new row

$('#addmore').click(function(){
    var lastname_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
    var split_id = lastname_id.split('_');
    var index = Number(split_id[1]) + 1;
    var html = "<tr class='tr_input'><td><input type='text' name='partnumber[]' class='username' id='username_"+index+"' placeholder='بگه‌ری بۆ پارت نه‌مبه‌ر '></td><td><input type='text' class='name' name='name[]' id='name_"+index+"'></td><td><input type='text' class='price' name='price[]'  id='price_"+index+"' ></td><td><input type='text' class='vat' name='vat[]' id='vat"+index+"'></td><td><input type='text' class='quantity' name='quantity[]' id='quantity_"+index+"' ></td><td><input type='text' class='amount' name='amount[]' id='amount_"+index+"' ></td><td><input type='text' class='total' name='total[]' id='total_"+index+"' ></td><td align='center'><input type='checkbox' name='record'></td></tr>";

    // Append data
    $('tbody').append(html);
});

and finally this is code for calculation the total, only working for the first row.

$('.total').each(function() {
    $(this).on('click',function (ev) {
        // var  total=0;
        var quantity=$(this).attr('id');
        var splitid = quantity.split('_');
        var index = splitid[1];
        var price= parseFloat($('#price_'+index).val());
        var vat=parseFloat($('#vat_'+index).val());
        var quan=parseFloat($('#quantity_'+index).val());
        var amount=$('#amount_'+index).val();
        amount=price+vat;
        $('#amount_'+index).val(amount);
        alert(amount);
        //alert(price);
        var total=amount*quan;
        //var qunatity_num=parseInt(quantity.val());
        $('#total_'+index).val(total);

        //alert(total);
        // $('#total_'+index).val(total);
    });
});

please, could you tell me what's is wrong with my code, it's been a week I am trying to solve this. Thank you.

you have to re-attach the eventhandler ( the $(this).click..) after you have added a new row (the $('tbody').append(html);), because when you loop through all .total elements to set the onclick handler you only have one (which is the first row it's working on). — Jeff
– Jeff, Commented Feb 3, 2019 at 18:11
Well the question is where you have placed $(this).on('click',function(){}) function. It works on the first row because initially the page loads with that row inside the table and all the other rows are added after the page has loaded, in other means there is no listener to that event in your code. so change $(this).on to $('body').on('click','.total', function(){}) — umair.ashfr
– umair.ashfr, Commented Feb 3, 2019 at 18:11
I'd recommend using jQuery's delegate() function to set eventhandlers also on future elements of a selector — Jeff
– Jeff, Commented Feb 3, 2019 at 18:16

trincot · Accepted Answer · 2019-02-03 18:16:12Z

2

Some issues:

There is an underscore missing in the HTML that you add for a new row: vat should be vat_
Don't use $('.total').each(function() {: it is not necessary to loop. The click handler will work on all matching elements, if you take the next point into account:
Use event delegation to make sure your click handler also gets called for future cells that have the total class:
```
$(document).on('click', '.total', function (ev) {
```

With that it works.

However it would be better not to use dynamic id attributes all and use CSS classes only. With jQuery methods you can easily find out which is the "current" row that was clicked on (.closest("tr")) and then to .find() the element you need in your formula.

answered Feb 3, 2019 at 18:16

trincot

357k38 gold badges282 silver badges338 bronze badges

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

1 Comment

Dosti Over a year ago

thanks a lot, works perfectly. I really appreciated.

Collectives™ on Stack Overflow

Calculation for input array in every row Jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related