jQuery sum of input values in sections

Question

I'm trying to find the sum of input values within multiple sections. I've put my code so far below.

The HTML:

<div class="section">
  <input type="radio" name="q1" value="2"/>
  <input type="radio" name="q2" value="0"/>
  <input type="radio" name="q3" value="1"/>
  <input type="radio" name="q4" value="3"/>
</div>

The jQuery:

$('.section').each(function(){
  var totalPoints = 0;
  $(this).find('input').each(function(){
    totalPoints += $(this).val();
  });
  alert(totalPoints);
});

Please note this is a simplified version of the code I'm actually using. So I want this to alert 2 values (the sum of each section): 8 then 6. Instead I'm just getting a string of all the values. So the first section alerts 0143.

Any ideas how I get a cumulative sum instead of a string?

Community · Accepted Answer · 2020-06-20 09:12:55Z

45

You are doing "1"+"1" and expect it to be 2 ( int)

it is not.

a very quick (and not fully correct) solution is :

$('.section').each(function(){
  var totalPoints = 0;
  $(this).find('input').each(function(){
    totalPoints += parseInt($(this).val()); //<==== a catch  in here !! read below
  });
  alert(totalPoints);
});

catch ? why ?

answer: You should always use radix cause if you dont , a leading zero is octal !

 parseInt("010") //8 ( ff)
 parseInt("010") //10 ( chrome)


 parseInt("010",10) //10 ( ff)
 parseInt("010",10) //10 ( chrome)

well.... you get the idea. supply radix !

edit

final solution (using .each( function(index, Element) ))

$('.section').each(function(){
      var totalPoints = 0;
      $(this).find('input').each(function(i,n){
        totalPoints += parseInt($(n).val(),10); 
      });
      alert(totalPoints);
    });

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 3, 2013 at 15:35

Royi Namir

149k145 gold badges502 silver badges833 bronze badges

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

6 Comments

Anthony Grist Over a year ago

Slightly amusing that you made a huge point about needing to specify the radix, but haven't actually done so in your updated version of his code.

Royi Namir Over a year ago

@AnthonyGrist I preferred to show him the solution + a big warning so he will remember it.

SeanCannon Over a year ago

This answer is now confusing and unhelpful.

CaribouCode Over a year ago

I'm using this code for a mobile web app so I guess it's just webkit I'll need to cover. But thanks for the explanation!

Mahak Choudhary Over a year ago

I dont think need to use parseInt because If you want to add decimal inputs then It will give you the correct result. You can use eval instead of parseInt. see the example below

|

Doguhan Okumus · Accepted Answer · 2013-01-03 15:44:42Z

8

Use parseFloat() or parseInt()

var totalPoints = 0;
$('.section input').each(function(){
        totalPoints = parseFloat($(this).val()) + totalPoints;
});
alert(totalPoints);

answered Jan 3, 2013 at 15:44

Doguhan Okumus

1014 bronze badges

Comments

Anthony Grist · Accepted Answer · 2013-01-03 15:35:45Z

4

The value is stored as a string, so calling += is doing string concatenation. You want/need to treat it as a number, so it does addition. Use the parseInt() function to convert it to a number:

totalPoints += parseInt($(this).val(), 10);

answered Jan 3, 2013 at 15:35

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

3 Comments

Royi Namir Over a year ago

to show him the answer without explaining where is the catch (radix) is not what this site is about. You didnt make him any smarter. You just showed him the answer. greatly educational !

Anthony Grist Over a year ago

@RoyiNamir The key point is that he needs to convert the string to an integer so it's doing addition and not concatenation. I've also linked him to the MDN documentation for parseInt(), which has its own warnings about specifying the radix, and I included a radix in my answer because it needs to be there.

Royi Namir Over a year ago

I'm not arguing with you.we both right. there is no competition here.

thesheps · Accepted Answer · 2013-01-03 15:51:26Z

0

The javascript function parseInt() should achieve what you require, here's a fiddle: http://jsfiddle.net/k739M/

And some formatted code:

$('.section').each(function(){
    var totalPoints = 0;
    $(this).find('input').each(function(){
        totalPoints += parseInt($(this).val());
    });

    alert(totalPoints);
});

Additionally, if you were to call $(each) on '.section input', you can reduce the amount of processing time (and code).

var totalPoints = 0;

$('.section input').each(function(){
    totalPoints += parseInt($(this).val());
});

alert(totalPoints);

edited Jan 3, 2013 at 15:51

answered Jan 3, 2013 at 15:42

thesheps

6554 silver badges11 bronze badges

1 Comment

Anthony Grist Over a year ago

Calling .each() on the '.section input' selector would completely change the functionality. Additionally, parseInt() is plain JavaScript, not a jQuery function.

Mahak Choudhary · Accepted Answer · 2018-09-13 05:27:34Z

0

Use eval instead of parseInt
var a = "1.5";
var b = "2";
var c = parseInt(a) + parseInt(b);
console.log(c); //result 3

var a = "1.5";
var b = "2";
var c = eval(a) + eval(b);
console.log(c); //result 3.5 this is accurate

answered Sep 13, 2018 at 5:27

Mahak Choudhary

1,3941 gold badge16 silver badges14 bronze badges

Comments

maspai · Accepted Answer · 2020-09-28 06:08:03Z

0

You can also use reduce() method of Array to get the sum:

var arrayOfValues = $('.section input[type=radio]').map(function(index, input) {
    return parseInt($(input).val());
}).toArray();
var sum = arrayOfValues.reduce(function(val1, val2) {
    return val1 + val2;
});

answered Sep 28, 2020 at 6:08

maspai

4351 gold badge6 silver badges17 bronze badges

Collectives™ on Stack Overflow

jQuery sum of input values in sections

6 Answers 6

edit

6 Comments

Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

edit

6 Comments

Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related