JQuery to add (math) up values of inputs

Question

I have an html form, and I want to only show the last section of the form if the value of all the other inputs is <= 500. Here is some simple html, mine is slightly more complicated, but it should be the same idea:

<div id="addSection">
  <input type="text" id="retire" />  
  <input type="text" id="child" />
  <input type="text" id="military" />
  <input type="text" id="nurse" />
  <input type="text" id="other" /> 
</div>
<div id="random" class="hidden">
<input type="text">  
</div>

And here my jQuery that doesn't get close to working :)

$('#addSection :input').keyup(function(){        
  $('#addSection').each(function(){
    var totalAmt = 0;
    $(this).find('input').each(function(i,n){
      totalAmt += parseInt($(n).val(), 10)
    });
  });
});

//if totalAmt <= 500 then $('#random').show();

Any ideas on how to get it to add as the user goes through the form? Thanks for the help, if you ahve any questions, I will answer quickly.

What is wrong with that? Except that you dont need the first .each. — Karl-André Gagnon
– Karl-André Gagnon, Commented Mar 28, 2014 at 16:53
@Karl-AndreGagnon Well, it doesnt seem to work. I put an alert for totalAmt in different places (inside the loop, after the loop, etc.) and I always get "Nan". I usually input all 1's into the textboxes — Mr Man
– Mr Man, Commented Mar 28, 2014 at 16:56
that would have been a good thing to add in the question ;) David Thomas answer solve that issue. — Karl-André Gagnon
– Karl-André Gagnon, Commented Mar 28, 2014 at 17:00
@Karl-Andre Sorry about that, got too focused on the question, and forgot to say it didn't work lol. — Mr Man
– Mr Man, Commented Mar 28, 2014 at 17:05

David Thomas · Accepted Answer · 2014-03-28 17:10:27Z

4

I'd suggest (on reviewing and subsequently rewriting my previous attempt):

$('#addSection').on('keyup', function(){
    var total = $(this).children().map(function(){
        return parseInt(this.value,10) || 0;
    }).get().reduce(
           function(a, b){
             return  parseInt(a,10) + parseInt(b,10);
           });
    $('#random').toggle(total <= 500);
}).trigger('keyup');

JS Fiddle demo.

References:

Plain JavaScript:
- Array.prototype.reduce().
- parseInt().
jQuery:
- children().
- get().
- on().
- toggle().

edited Mar 28, 2014 at 17:10

answered Mar 28, 2014 at 16:55

David Thomas

254k53 gold badges382 silver badges421 bronze badges

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

3 Comments

mplungjan Over a year ago

Quite complex for such a simple thing :)

David Thomas Over a year ago

True, but beautiful...or, wait: that could just be me and my crazy O_O

mplungjan Over a year ago

Liking the trigger tho

Jamiec · Accepted Answer · 2014-03-29 00:46:34Z

1

This should do the trick:

$('#addSection :input').keyup(function(){        
    var totalAmt = 0
  $('#addSection :input').each(function(){
    totalAmt += parseInt($(this).val(), 10) || 0   

  });
   $('#random').toggle(totalAmt <= 500);
});

Live example: http://jsfiddle.net/ZL3q4/2/

edited Mar 29, 2014 at 0:46

answered Mar 28, 2014 at 17:00

Jamiec

136k15 gold badges143 silver badges202 bronze badges

1 Comment

mplungjan Over a year ago

Please toggle instead of using if. So inelegant

Andreas · Accepted Answer · 2014-03-28 17:19:45Z

0

Try this:

<div id="addSection">
    <input type="text" id="retire" />
    <input type="text" id="child" />
    <input type="text" id="military" />
    <input type="text" id="nurse" />
    <input type="text" id="other" />
</div>
<div id="random" style="display: none;">
    <input type="text">
</div>


$('#addSection :input').keyup(function () {
    var totalAmt = 0;
    $('#addSection :input').each(function (i, n) {
        if (parseInt($(n).val(), 10)) totalAmt += parseInt($(n).val(), 10);
    });
    if (totalAmt > 500) $("#random").show();
    else $("#random").hide();
});

answered Mar 28, 2014 at 17:19

Andreas

5,1562 gold badges28 silver badges37 bronze badges

1 Comment

mplungjan Over a year ago

Please toggle instead of using if. So inelegant

Collectives™ on Stack Overflow

JQuery to add (math) up values of inputs

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related