Question

I’m creating a form to input an invoice with dynamically added rows (as seen in this image)

I’m using jquery 1.6.2 to calculate Line Total, sum all Line Totals, calculate Tax and display Total. The problem that I’m having is that calculating Line Total only works for the first added row. As you can see on the image above, the first row (Item 1), is fine (2*30=60), but the second row (Item 2) shows the same total as the first one (it should be 4*100=400). Here’s the code for this part:

<script type="text/javascript">
var $k = jQuery.noConflict();

$k(function (){
    $k('#item_form').live("keyup", "input[name^=linetotal]", function() {
        var quantity = $k('input[name^=quantity]').val();
        var unitprice = $k('input[name^=unitprice]').val();
        $k('input[name^=linetotal]').val(quantity*unitprice);

        var sum = $k('input[name^=linetotal]').sum();

        $k('#subtotal').val(sum);
        $k('#tax').val(Math.round(sum*10*100)/100);
        $k('#total').val(Math.round((sum+Math.round(sum*10*100)/100)*100)/100);
     });
});
</script>   

Any ideas about what should I try? Thank you all!

Answer 1

You are using $k(input[name^=quantity]').val(); to grab the quantity/unitprice, but this grabs all quantity/unitprice inputs, and .val() gets the value of the first one.

You need to get the one on the same line, although it is odd that you are waiting for keyup on the linetotal. Wouldn’t you want keyup on quantity and unitprice?

 $k('input[name^=quantity], input[name^=unitprice]').live("keyup", function() {
        var quantity = parseFloat($k(this).parent().find('input[name^=quantity]').val());
        var unitprice = parseFloat($k(this).parent().find('input[name^=unitprice]').val());
        $k(this).siblings('input[name^=linetotal]').val(quantity*unitprice);

        var sum = $k(this).siblings('input[name^=linetotal]').sum();

        $k('#subtotal').val(sum);
        $k('#tax').val(Math.round(sum*10*100)/100);
        $k('#total').val(Math.round((sum+Math.round(sum*10*100)/100)*100)/100);
     });
});

Basic jsfiddle demo: http://jsfiddle.net/jtbowden/YxJCF/