How to automatically sum input value boxes in an HTML table that share the same name?

Question

I have an HTML table with columns of input boxes, and would like the sum of the values in the boxes to be displayed automatically (i.e. without clicking a sum button and updates as the values in the boxes are changed). The number of rows in the table varies as it is dynamically created through velocity. Below is an example HTML table, I want the sum of the values in the capacity row to be displayed. I am not really sure where to start, I have tried numerous JavaScript code and have been unable to get anything to correctly work.

 <table border = "1" id = "table">
  <TR>
        <TH>Resource</TH> 
        <TH>Vacation</TH>
        <TH>Allocation</TH>
        <TH>Holidays</TH> 
        <TH>Capacity</TH>
        <TH>Remainder</TH>
    </TR>

  #foreach($user in $userList)
  <tr>
  <td>$user.resource</td>

        <td><input type=text name="vacation" size="6" maxlength="10"></td>
        <td><input type=text name="alloc" size="6" maxlength="10"></td>
        <td><input type=text name="holidays" size="6" maxlength="10"></td>
        <td><input type=text name="capacity" size="6" maxlength="10"></td>
        <td><input type=text name="remainder" size="6" maxlength="10"></td>
    </tr>
  #end 
  <tr>
  <td>Total:</td>
  <td></td><td></td><td></td>
  <td class= "capsum"><input type="text" name="captotal" size="6" maxlength="10"></td>
  <td><input type="text" name="remtotal" size="6" maxlength="10"></td>

  </tr>

  </table>

There will be multiple rows in the table, and each input box in the capacity column shares the same name. So the sum of the Capacity column should be displayed in the "capsum" input box, and should be calculated automatically and update as the values in the input boxes are changed.

Look at using [`.each`](http://api.jquery.com/jQuery.each/) to loop through the rows. You can then extract each number and add it to a variable. — Blazemonger, Jul 18 '12 at 14:50

Paul Fleming · Accepted Answer · 2012-07-18T15:33:15.140

1

Something like this:

$('table#table input[name=capacity]').change(function()
{
 var sum = 0;

 $('table#table input[name=capacity]').each(function()
 {
  sum += parseInt($(this).val());
 });

 $('input[name=captotal]').val(sum);
});

http://jsfiddle.net/H7DSX/10/

edited Jul 18 '12 at 15:33

answered Jul 18 '12 at 14:52

Paul Fleming

24,238
8
76
113

You're making the assumption that he's using jQuery or would know to use jQuery. You need to pad that answer a bit. – Mike Fulton Jul 18 '12 at 14:54
@MikeFulton The question is tagged with jQuery. – Paul Fleming Jul 18 '12 at 14:54
Oh, so it is. Sorry, I missed that. – Mike Fulton Jul 18 '12 at 14:55
I have jQuery but really do not know how to use it – mbecker73 Jul 18 '12 at 15:06

score 0 · Answer 2 · edited May 23 '17 at 12:27

Hook on the change event, best at table level. Then sum up all values:

var updatefns = {};
jQuery.each(["vacation", "alloc" ,"holidays", "capacity", "remainder"], function(i, name) {
     // cache all the elements
     var head = $("#table tr:first th:nth-child("+i+")"); // kind of selector
     var inputs = $("#table input[name=\""+name+"\"]");
     updatefns[name] = function() {
         var sum = 0;
         inputs.each(function(){
             sum+=parseInt(this.value) || 0;
         });
         // set new text:
         head.text(name.charAt(0).toUppercase+name.substr(1)+": "+sum);
     };
});
$("#table").change(function(e){
     var t, n;
     if ((t = e.target) && (n = t.name) && n in updatefns)
         updatefns[n]();
});

You might use a better selector for the head cells to-be-updated, maybe give them a respective attribute to select them. And of course you are free to change the way how the new text is set.

score -1 · Answer 3 · answered Jul 18 '12 at 14:52

-1

You need to assign a function to be processed for the onChange JavaScript event for the form fields that need to be summed.

This function would then simply read out the values of each of the fields, calculate the sum, and then store it back where it needs to go.

answered Jul 18 '12 at 14:52

Mike Fulton

920
11
22

can you go into more detail on how to do this? – mbecker73 Jul 18 '12 at 15:10

score -1 · Answer 4 · answered Jul 18 '12 at 14:56

If you have jQuery try:

<table onchange="reloadSum()"></table>

var reloadSum = function() {
    var sums = $('.toBeSummed'); // this will need to be the class of the things you want to sum
    var sum = 0;
    for (var i = 0; i < sums.length; i++) {
        sum += parseFloat(sums[i].value);// or maybe parseFloat(sums[i].innerHTML)
    }
    $('#capsum').text(sum);
}

If you don't have jQuery get jQuery and then do this.

How to automatically sum input value boxes in an HTML table that share the same name?

4 Answers4