1

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.

Mike
  • 2,561
  • 7
  • 34
  • 56
  • [IDs of HTML elements must begin with a letter, and can contain neither vertical bars nor slashes.](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html) – Frédéric Hamidi Jan 05 '11 at 21:01
  • Well I've used the same convention for the name attribute for each textbox as well. – Mike Jan 05 '11 at 21:04
  • 1
    Can you specify a class for the inputs you want to sum? – Alex Vidal Jan 05 '11 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 Jan 05 '11 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 Jan 05 '11 at 21:33
  • @David, yes, HTML5 allows any character in `id` and `name` attributes, except `space`. – Frédéric Hamidi Jan 05 '11 at 21:35

2 Answers2

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.net/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!

Alex Vidal
  • 4,080
  • 20
  • 23
  • How do I specify or where do I specify a different parent element for the different series of inputs? – Mike Jan 05 '11 at 21:28
  • BTW - The series of inputs are dynamically generated. – Mike Jan 05 '11 at 21:30
  • @Mike: I updated my answer to show some sample HTML that works with the javascript I posted. As long as each group of inputs (dynamically generated or not) are enclosed in a separate parent element, this will work. – Alex Vidal Jan 05 '11 at 21:31
  • Does it matter if these inputs are in a table row in separate 's? – Mike Jan 05 '11 at 21:42
  • @Mike: Whoa, that's some ugly HTML. I'll try to simplify it slightly, then adjust the code to compensate. – Alex Vidal Jan 05 '11 at 21:55
  • I've updated the jsfiddle link with properly formatted html code. I've added an id to the . Could that be used as a parent element? I don't think I can have
    's in the table html code.
     – Mike Jan 06 '11 at 03:24
  • @Mike: Check this fiddle: http://jsfiddle.net/avidal/zfjmD/, also, updated my answer to reflect the changes. – Alex Vidal Jan 06 '11 at 04:28
0

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.

dac
  • 811
  • 3
  • 12
  • 24