Jquery: sum input text fields

Question

I have a table including input text fields with the basic structure below. I am having trouble building a function to iterate all rows in the table and sum all the values of input fields beginning with BFObel where the value of the field beginning with BFOkto are the same. So for the basic example below the sum for value 1111 would be 2000 and the sum for value 1112 would be 3000. Each sum would then be written to an inputfield with the id field1111, field1112 etc...

<table>
  <tr id="BFOrow1">
    <td><input type="text" id="BFOtxt1" value="text"/></td>
    <td><input type="text" id="BFOkto1" value="1111" /></td>
    <td><input type="text" id="BFObel1" value="1000" /></td>
  </tr>
  <tr id="BFOrow2">
    <td><input type="text" id="BFOtxt2" value="text"/></td>
    <td><input type="text" id="BFOkto2" value="1111" /></td>
    <td><input type="text" id="BFObel2" value="1000" /></td>
  </tr>  
  <tr id="BFOrow3">
    <td><input type="text" id="BFOtxt3" value="text"/></td>
    <td><input type="text" id="BFOkto3" value="1112" /></td>
    <td><input type="text" id="BFObel3" value="1000" /></td>
  </tr>  
  <tr id="BFOrow4">
    <td><input type="text" id="BFOtxt4" value="text"/></td>
    <td><input type="text" id="BFOkto4" value="1112" /></td>
    <td><input type="text" id="BFObel4" value="1000" /></td>
  </tr>  
  <tr id="BFOrow5">
    <td><input type="text" id="BFOtxt5" value="text"/></td>
    <td><input type="text" id="BFOkto5" value="1112" /></td>
    <td><input type="text" id="BFObel5" value="1000" /></td>
  </tr>  
</table>

Since you're computing several sums, what do you intend to do with the results? Should they e.g. be returned in an array, or stored in the rows themselves as attributes / data? — Frédéric Hamidi
– Frédéric Hamidi, Commented Apr 17, 2011 at 19:38
Each sum will be written to another input field with the id like 1111 or 1112 — Kevin Lindmark
– Kevin Lindmark, Commented Apr 17, 2011 at 19:40
do you mean you want to fetch the unique values within the BFOkto* elements first? Also, HTML 4 and lower does not allow numbers as ids, won't that be a problem? — Frédéric Hamidi
– Frédéric Hamidi, Commented Apr 17, 2011 at 19:45
@ Frédédric, not sure where to begin. I have been trying iterating each row first but haven't found a good solution. As for the html4 numbers you are correct. The input fields I use actually are named like field1111, field1112 etc... — Kevin Lindmark
– Kevin Lindmark, Commented Apr 17, 2011 at 19:52

mu is too short · Accepted Answer · 2011-04-17 19:54:59Z

2

You'll want to use an object literal to track your results and an "attribute starts with" selector to find the text inputs:

var accumulator = { };
$('table input[id^=BFOkto]').each(function() {
    var sum_id = this.id.replace(/^BFOkto/, 'BFObel');
    if(!accumulator[this.value])
        accumulator[this.value] = 0;
    accumulator[this.value] += parseInt($('#' + sum_id).val(), 10);
});
// accumulator now has your results.

Don't forget the second argument to parseInt() so that you don't get tripped up by values with leading zeros (which look like octal without a specified radix).

For example: http://jsfiddle.net/ambiguous/QAqsQ/ (you'll need to run this in a browser with an open JavaScript console to see the resulting accumulator).

answered Apr 17, 2011 at 19:54

mu is too short

436k71 gold badges863 silver badges822 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kon · Accepted Answer · 2011-04-17 19:56:12Z

0

var sum1111 = 0;

$('input[value="1111"]').each(function() {
  var ordinal = $(this).attr('id').replace('BFOkto', '');
  sum1111 += parseInt($('#BFObel' + ordinal).val());
});

At the end, sum1111 should equal 2000.

For reuse, wrap the logic in a function:

function getSum(BFOkto) {
    var sum = 0;
    var ordinal = null;

    $('input[value="' + BFOkto + '"]').each(function() {
      ordinal = $(this).attr('id').replace('BFOkto', '');
      sum += parseInt($('#BFObel' + ordinal).val());
    });

    return sum;
}

And then call:

getSum('1111');
getSum('1112');

edited Apr 17, 2011 at 19:56

answered Apr 17, 2011 at 19:48

Kon

27.5k12 gold badges64 silver badges87 bronze badges

2 Comments

Kevin Lindmark Over a year ago

In my case the value is not known from the beginning (depends on user input) so I need a function that can be used for unknown values/selectors.

Kon Over a year ago

ok, then replace getSum('1111') with getSum($('#BFOkto1').val())

Miquel · Accepted Answer · 2011-04-17 20:34:26Z

0

A different approach: find all input fields with prefix BFOkto, for each, find the input with prefix BFObel sharing same parent and accumulate its value

ref = $("table td input[id^=BFOkto]");

var sums = new Object();
ref.each(function(){
    val = parseInt($(this).closest('tr').find("td input[id^=BFObel]").val(), 10);
    property = 'i'+ this.value;
    sums[property] = (sums[property] || 0 ) + val;
});

alert(sums['i1111']);
alert(sums['i1112']);

sums will be an object with properties

i1111 = 2000
i1112 = 3000

Despite javascript allows it, it is better not to use pure numeric properties for objects (associative arrays), hence the i prefix

The running example is here: http://jsfiddle.net/TbSau/1/

answered Apr 17, 2011 at 20:34

Miquel

4,8493 gold badges22 silver badges19 bronze badges

Collectives™ on Stack Overflow

Jquery: sum input text fields

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related