input array sum with jQuery

Question

Hello I have unknown quantity of inputs with array name and class

<input type="hidden" name="hidden[1]" class="sum" value="31">
<input type="hidden" name="hidden[2]" class="sum" value="21">
<input type="hidden" name="hidden[3]" class="sum" value="321">
<input type="hidden" name="hidden[4]" class="sum" value="-31">
<input type="hidden" name="hidden[5]" class="sum" value="31.12">
<input type="hidden" name="hidden[6]" class="sum" value="0">

Question is how sum all values of those fields what i try is to use .each() and getElementByClassName but this wont work

could you show your not working code..?

Sudhir Bastakoti
– Sudhir Bastakoti

2013-10-07 09:18:48 +00:00
Commented Oct 7, 2013 at 9:18 — Sudhir Bastakoti
– Sudhir Bastakoti, Commented Oct 7, 2013 at 9:18

Lix · Accepted Answer · 2015-06-02 20:50:00Z

8

Iterate over the matched elements and add their values together:

var total = 0;
$( ".sum" ).each( function(){
  total += parseFloat( $( this ).val() ) || 0;
});

I'm using $.each() to iterate over all items matching the .sum class, and then extracting the value attribute with .val(). Once we have that value, we need to make sure that it is numerical so I've used parseFloat(). If parseFloat() returns a falsy value, 0 will be used.

References:

edited Jun 2, 2015 at 20:50

answered Oct 7, 2013 at 9:18

Lix

48.2k12 gold badges107 silver badges134 bronze badges

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

2 Comments

Sudhir Bastakoti Over a year ago

parseInt(31.12).. would be 31, but its 31.12..?

Andy Over a year ago

I'd also use $(this).val() or this.value instead of attr.

SridharVenkat · Accepted Answer · 2013-10-07 10:07:29Z

7

I tried using the each, it worked for me. Check if you used parseFloat...
If you have 'sum' as a class to define all the elements that must be calculated, below code should work....

$(document).ready(function () {
    var total = 0;
    $('.sum').each(function (index, element) {
        total = total + parseFloat($(element).val());
    });
    alert(total);
});

edited Oct 7, 2013 at 10:07

answered Oct 7, 2013 at 9:25

SridharVenkat

6568 silver badges21 bronze badges

Comments

Anton · Accepted Answer · 2013-10-07 09:19:19Z

3

var totalSum = 0;
$('.sum').each(function () {
    totalSum += parseFloat(this.value);
});

DEMO

answered Oct 7, 2013 at 9:19

Anton

32.6k5 gold badges47 silver badges54 bronze badges

1 Comment

Andy Over a year ago

+1 for being the only one who correctly used parseFloat instead of parseInt

Vinay Pratap Singh Bhadauria · Accepted Answer · 2013-10-07 09:20:21Z

2

you can do it like this

var total = 0;
$('.sum').each(function() {
total += parseFloat($(this).val());
});

answered Oct 7, 2013 at 9:20

Vinay Pratap Singh Bhadauria

9,9873 gold badges30 silver badges50 bronze badges

Comments

letiagoalves · Accepted Answer · 2013-10-07 09:19:01Z

0

Using each jQuery function to iterate input.sum elements will be enough.

var sum = 0;
$('input.sum').each(function() {
   var value = +this.value || 0;
   sum += value;
});

Working demo

answered Oct 7, 2013 at 9:19

letiagoalves

11.3k4 gold badges42 silver badges68 bronze badges

Collectives™ on Stack Overflow

input array sum with jQuery

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related