Calculate sum each row by jQuery when changing value in textbox

Asked By: Anonymous

On keyup of quantity textbox, the price was changed. But sub total div doesn’t change the value​, only if I refresh a page.

Any idea how to calculate sum of each row and change in subtotal div in jquery please.

Thanks.

Solution

Answered By: Anonymous

Have a class assigned to all textfields that you want to consider for subtotal, and listen for change on those textfields and compute subtotal on change. Here is a jsfiddle for the same http://jsfiddle.net/ravikumaranantha/Sb6zS/3/

<table>
    <tr>
        <td>Product 1</td>
        <td>
            <input class="quantity" type="text" value="10" />
            <input class="price" type="hidden" value="20" />
        </td>
        <td>$20</td>
    </tr>
    <tr>
        <td>Product 1</td>
        <td>
            <input class="quantity" type="text" value="20" />
            <input class="price" type="hidden" value="40" />
        </td>
        <td>$40</td>
    </tr>
</table>
<div class="subtotal"></div>


$('.quantity').on('change', function(){

    var subtotal = 0;
    $('.quantity').each(function(){
        var $this = $(this);
        var quantity = parseInt($this.val());
        var price = parseFloat($this.siblings('.price').val())
        subtotal+=quantity*price;
    })
    $('.subtotal').text(subtotal);

})
$('.quantity').trigger('change')