Calculate Sum of Multiple Input Numbers JQuery

Question

I have 3 inputs and I'm trying to get the sum of the numbers each time a user updates one of them.

HTML

<input class="my-input" type="number" name="" value="0" min="0">
<input class="my-input" type="number" name="" value="0" min="0">
<input class="my-input" type="number" name="" value="0" min="0">

JS

var sum = 0;
$('.my-input').each(function(index, elem){
  var value = $(this).val();

  sum += parseFloat($(elem).val());
  console.log(sum);

  $(this).on('keyup click', function (){

    sum += parseFloat($(elem).val());

  });
});

But I keep getting crazy results..

EDIT:

I tried this:

  function getSum(){
    var sum = 0;
    $('.my-input').each(function(index, elem){
      var value = $(this).val();

      sum += parseFloat($(elem).val());

    });

     return sum;
  }

  $('.my-input').each(function(){
    $(this).on('keyup click', function(){
      console.log( this.value );
      var curSum = getSum();

      console.log('current sum: ' + curSum);
    });
  });

Shawinder Sekhon · Accepted Answer · 2014-05-06 01:14:27Z

2

Consider this example:

<input class="my-input" type="number" name="" value="0" min="0" />
<input class="my-input" type="number" name="" value="0" min="0" />
<input class="my-input" type="number" name="" value="0" min="0" />
<input type="text" id="total" value="" />

<script type="text/javascript">
// just get keyup event
$('.my-input').on('keyup', function(){
    var total = 0;
    // on every keyup, loop all the elements and add all the results
    $('.my-input').each(function(index, element) {
        var val = parseFloat($(element).val());
        if( !isNaN( val )){
           total += val;
        }
    });
    $('#total').val(total);
});
</script>

edited May 6, 2014 at 1:14

Shawinder Sekhon

1,60913 silver badges23 bronze badges

answered May 6, 2014 at 0:43

user1978142

7,9683 gold badges19 silver badges20 bronze badges

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

2 Comments

cusejuice Over a year ago

This works thanks. I just tried another way (added an edit). Is there anything different from your example?

user1978142 Over a year ago

not much different too, if your personal preference is to add a method for computing the sum, its still okay.

Collectives™ on Stack Overflow

Calculate Sum of Multiple Input Numbers JQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related