jQuery: get sum of values of all selects with same class

Question

I have an HTML form with multiple selects that all have the same class. Out of these only one appears at a time depending on previous selections and thus only one of them can have a value at a time.

What is the proper / best way to get the value of all these selects put together ?

They look like this:

<select class="formField" id="input1"> ... list of options ... </select>
<select class="formField" id="input2"> ... list of options ... </select>
<select class="formField" id="input3"> ... list of options ... </select>

Would the following be correct in this case ?

$('.formField').val();

Thanks for any help with this, Tim.

Rajaprabhu Aravindasamy · Accepted Answer · 2013-11-26 16:38:32Z

4

You have to use .each() to iterate through those elements and add their value in a separate variable.

Try this,

var xSum = 0;

$('.formField').each(function(){
  xSum += parseInt($(this).val());
 })

alert(xSum);

For your reference read this : .each()

Update

The following code will concatenate the values.

var xResultString = '';

$('.formField').each(function(){
  xResultString += $.trim($(this).val());
 })

alert(xResultString);

DEMO

edited Nov 26, 2013 at 16:38

answered Nov 26, 2013 at 16:32

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

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

4 Comments

Pedro Estrada Over a year ago

Man you were quick! Good job.

user2571510 Over a year ago

Thanks ! The values of my select options only contain text. I guess I would not need parseInt then, right ? How would I do it then ?

Rajaprabhu Aravindasamy Over a year ago

@user2571510 so you want to concatenate it right.? I misunderstood with that word sum.

user2571510 Over a year ago

Thats perfect - exactly what I was looking for ! Sorry for the misleading description.

Pedro Estrada · Accepted Answer · 2013-11-26 16:43:38Z

2

You need a iterate through all of them. This script will concatenate all the strings.

var selectValues = "";

$('.formField').each(function () {
  selectValues += $(this).val();
});

console.log(selectValues);

edited Nov 26, 2013 at 16:43

answered Nov 26, 2013 at 16:32

Pedro Estrada

2,4192 gold badges17 silver badges24 bronze badges

Collectives™ on Stack Overflow

jQuery: get sum of values of all selects with same class

2 Answers 2

DEMO

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related