jquery table rows line totals and grand total

Question

I'm currently writing a small plugin for computer repair techs and I'm now trying to code the invoice section but not having much luck!

I've got the fields being populated from the database but I'm trying to use jquery to update the line totals and the total of the invoice.

Heres a quick image of what I'm trying to do!

enter image description here I'm trying to get it to update the totals on pageload and when a value changes in the unit cost and quantity textfields.

$(document).ready(function() {
    $("#invoiceitems tbody tr").each(function() {
        $(this).change(function() {
            updateTotal();
        });
    });
});

function updateTotal() {

    //Calculate Subtotal for each item
    var quantity = $('.quantity').val();
    var price = $('.price').val();
    var subtotal = parseInt(quantity) * parseFloat(price);
    $('.subtotal').text(subtotal);
    //Calculate Grand Total
    var sum = 0;
    $('.linetotal').each(function() {
        sum += parseFloat($(this).text());
    });
    $('#grandTotal').html(parseFloat(sum));
}

Found this code on here but I really don't have a clue and can't get it to work!

Some direction/help would be greatly appreciated!

Thanks very much Jase

Can you show any html or, better yet, use http://www.jsfiddle.net? — Dom, Sep 07 '12 at 20:37
http://jsfiddle.net/7gaWf/1/ I'm not sure if i've done that correct, first time using fiddle! — Jason Mutton, Sep 07 '12 at 21:05

score 1 · Answer 1 · answered Sep 07 '12 at 20:59

Given this simple HTML as an example:

<table>
<tr>
<td>
<input type="text" name="unitCost[]" id="unitCost_1" value="15.99" class="editable"/>
</td>
<td>
<input type="text" name="quantity[]" id="quantity_1" value="1" class="editable"/>
</td>
</tr>
<tr>
<td>
<input type="text" name="unitCost[]" id="unitCost_2" value="2.50" class="editable"/>
</td>
<td>
<input type="text" name="quantity[]" id="quantity_2" value="1" class="editable"/>
</td>
</tr>
</table>

I think you'll want to change your jQuery to look something like this:

$(document).ready(function() {
    updateTotal();

    $(".editable").live("change", function() {
        updateTotal();
    });
});

Without seeing your actual HTML, it's hard to say whether or not there is anything wrong with you updateTotal() function

Sushanth -- · Accepted Answer · 2012-09-07T22:29:54.540

1

Looks like you are a complete novice to jQuery.. !! Good start though.. Not hard to pick it up..

Here .price , .quantity and .lineTotal corresponds to class names of the columns they are talking about.. grandTotal is the id of the Total in the table..

I have put up a Working Example Updated for the case you are trying to work into.. Should be a good start..

But do take care that I have not added any conditions to check if the user input is valid or not... Try adding those while rolling it out.. Let me know if you face any difficulty in decoding it.

edited Sep 07 '12 at 22:29

answered Sep 07 '12 at 21:10

Sushanth --

55,259
9
66
105

WOW! I've just implemented it and it works great! Just one more thing, how would I get it to generate the totals on the initial loading of the page? – Jason Mutton Sep 07 '12 at 22:09
Just tweak your code a bit.. Separate the updateTotals() method into 2 parts.. Check the update FIDDLE above.. I have separated them into two functions . And just call the CalculateTotals() in Document.Ready.. – Sushanth -- Sep 07 '12 at 22:29
http://jsfiddle.net/BE8c7/1/ This is what I've got at the moment. Can't seem to get it to generate the line totals/total on load. And for some reason it doesent seem to work when I add a new textfield element using the button. – Jason Mutton Sep 08 '12 at 06:08
You need to assign the event when the new elements are added.. Otherwise elements won't be attached to the event handlers.. Check this update FIDDLE http://jsfiddle.net/sushanth009/BE8c7/5/ – Sushanth -- Sep 09 '12 at 01:43
That worked great! I've also managed to restrict the price and quantity fields to numbers only! Has anyone got any suggestions on how to deal with storing this into a database? I've got two tables set, invoices and invoiceitems. I was thinking that when the form is submitted it will delete every current invoiceitem for that invoice and readd everything from the submitted form. Does that sound like a good option? As I believe trying to figuure out whats been updated and is new would be tricky! – Jason Mutton Sep 09 '12 at 09:35

jquery table rows line totals and grand total

2 Answers2

Linked