I have a series of textboxes with the following IDs:

118|1/9/2011
118|1/10/2011
118|1/11/2011
118|1/12/2011
118|1/13/2011
118|1/14/2011
118|1/15/2011
118|Total

Using jQuery or just javascript, I need to sum each textbox and assign the value to the total textbox. This needs to happen when a user tabs off or clicks off the textbox. It also needs to be generic enough to handle textboxes with similar IDs such as:

119|1/9/2011
119|1/10/2011
119|1/11/2011
119|1/12/2011
119|1/13/2011
119|1/14/2011
119|1/15/2011
119|Total

The format stays the same. Only the first numbers to the left of the | will change.

Any guidance would be greatly appreciated.

I have a series of textboxes with the following IDs:

118|1/9/2011
118|1/10/2011
118|1/11/2011
118|1/12/2011
118|1/13/2011
118|1/14/2011
118|1/15/2011
118|Total

Using jQuery or just javascript, I need to sum each textbox and assign the value to the total textbox. This needs to happen when a user tabs off or clicks off the textbox. It also needs to be generic enough to handle textboxes with similar IDs such as:

119|1/9/2011
119|1/10/2011
119|1/11/2011
119|1/12/2011
119|1/13/2011
119|1/14/2011
119|1/15/2011
119|Total

The format stays the same. Only the first numbers to the left of the | will change.

Any guidance would be greatly appreciated.

• javascript
• jquery

Share Improve this question Follow asked Jan 5, 2011 at 20:52 MikeMike 2,60177 gold badges3636 silver badges5656 bronze badges 6

• IDs of HTML elements must begin with a letter, and can contain neither vertical bars nor slashes. – Frédéric Hamidi Commented Jan 5, 2011 at 21:01
• Well I've used the same convention for the name attribute for each textbox as well. – Mike Commented Jan 5, 2011 at 21:04
• 1 Can you specify a class for the inputs you want to sum? – Alex Vidal Commented Jan 5, 2011 at 21:09
• Sure. I can do anything to make this easier. Just need some code to get started. I'm having a brain freeze at the moment not to mention I'm not that great at jquery. – Mike Commented Jan 5, 2011 at 21:11
• @Frédéric Hamidi, that's true of html 4; I understand the rules are a little different for html 5. – David Thomas Commented Jan 5, 2011 at 21:33

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 6

EDIT: I updated my answer to reflect the actual example HTML that Mike provided, which you can view in this fiddle. That link also contains the working javascript from below.

---

If you have a specific selector for the inputs you want to sum (like a class name), as well as one for the total, you should be able to do this (here's a fiddle link with this javascript in action: http://jsfiddle/avidal/zfjmD/):

$('input.sum').change(function() {
    var sum = 0;

    // we want to sum up the values of all input.sum elements that are in the same tr
    // as this one
    $(this).closest('tr').find('input.sum').each(function(i) {
        var val = parseInt($(this).val(), 10);
        /*
        change the above line to:
        var val = parseFloat($(this).val());
        if the inputs will be floats
        */
        if (isNaN(val) || val === undefined) {
            return;
        }

        sum += val;
    });

    $(this).closest('tr').find('input.total').val(sum);

});

The important things to note are the .closest() function, and the .find() function.

First, we bind to the change event for all inputs with a class of sum. When one of those elements is changed (the value changes, then the user clicks/tabs out), we look for the closest tr element, then find the list of inputs with a class of sum that are children of that tr. For each of those inputs, we parse the value and accumulate the sum. After we've iterated over each of those inputs, we finally find the input with a class of total that's a descendant of the closest tr, and set the val of that input to the accumulated sum

Perfect!

Great question and great answer! This works perfectly! To answer Mike, I changed 'tr' to 'table' in the jQuery and it totals all the sums in a table across several tr's and td's. As long as the inputs have the class="sum" they will be totaled.