Looping through input values with jQuery and creating Total Sum

Question

I have comments/reviews in my page. Every comments has hidden input fields that contains values. What I want to achieve is, to loop through this values (which have classes asigned), and then sum up the values.

<input type="hidden" class="value1" value="20" />
<input type="hidden" class="value2" value="30" />
<input type="hidden" class="value1" value="20" />
<input type="hidden" class="value2" value="30" />
<input type="hidden" class="value1" value="20" />
<input type="hidden" class="value2" value="30" />

Then I have spans, where I want to put out the summed up values like:

<span class="value1sum">60</span>
<span class="value2sum">90</span>

How can I achieve a loop, that loops through the values of both classes (".value1") and (".value2"), sum them up and put the results into the span classes (".value1sum") and (".value2sum")? Thank you very much in advance!

What I can think of is kind of is:

$(".value1").each(function(i, obj) {
   //? 
});
$("value1sum").html(i);

The posted question does not appear to include any attempt at all to solve the problem. Stack Overflow expects you to [try to solve your own problem first](https://meta.stackoverflow.com/questions/261592/), as your attempts help us to better understand what you want. Please edit the question to show what you've tried, so as to illustrate a specific roadblock you're running into in a [MCVE]. For more information, please see [ask] and take the [tour]. — CertainPerformance, Oct 07 '19 at 10:05
make some efforts to get the solution you want. We are here to help you out and not to do your homework — Bhushan Kawadkar, Oct 07 '19 at 10:06
@арнонюм if you did search on google you would find https://stackoverflow.com/questions/14142011/jquery-sum-of-input-values-in-sections fairly easy. — Carsten Løvbo Andersen, Oct 07 '19 at 10:19
More javascript way would be
valSum={ value1:0, value2:0 } document.querySelectorAll('.value1').forEach( (val)=>{ valSum.value1 +=Number(val.value); }) document.querySelectorAll('.value2').forEach( (val)=>{ valSum.value2 +=Number(val.value); }) console.log(valSum) document.getElementByClass(value1sum).innerHTML =valSum.value1; document.getElementByClass(value2sum).innerHTML =valSum.value2; — Nambi N Rajan, Oct 07 '19 at 10:25

raffaeleambrosio · Accepted Answer · 2019-10-07T15:01:48.343

2

var sumv1=0;
var sumv2=0;
$(".value1,.value2").bind().each(function(index, obj) {

    if($(this).hasClass("value1"))
     sumv1+=parseInt($(this).val());

    if($(this).hasClass("value2"))
     sumv2+=parseInt($(this).val());
});

  $(".value1sum").html(sumv1);
  $(".value2sum").html(sumv2);

Update: I prefer to separate logics for reusability and manutenibility

function calculateSum(sourceClassSelector, targetSumClassSelector){
    var sum =0;
    $(sourceClassSelector ).each(function() {   
         sum +=parseInt($(this).val());
    });
    $(targetSumClassSelector).html(sum);
}

calculateSum(".value1",".value1sum");
calculateSum(".value2",".value2sum");

edited Oct 07 '19 at 15:01

answered Oct 07 '19 at 10:19

raffaeleambrosio

235
2
11

its easy to use one loop instead two loops : var sumv1=0; var sumv2=0; $(".value1,.value2").bind().each(function(index, obj) { if($(this).attr('class')=="value1") sumv1+=parseInt($(this).val()) if($(this).attr('class')=="value2") sumv2+=parseInt($(this).val()) }); $(".value1sum").html(sumv1); $(".value2sum").html(sumv2); – becher henchiri Oct 07 '19 at 10:32
1

you're right, your solution is better, just use .hasClass( "value1" ) for safety – raffaeleambrosio Oct 07 '19 at 10:40

Looping through input values with jQuery and creating Total Sum

1 Answers1