How do you add the values from input fields and update another field with the result in jQuery?

Question

Preamble: I'm more of a PHP/MySQL guy, just starting to dabble in javascript/jQuery, so please excuse this dumb newbie question. Couldn't figure it out from the Docs.

I have a form without a submit button. The goal is to allow the user to input values into several form fields and use jQuery to total them up on the bottom in a div. The form kinda looks like this but prettier:

<form>
Enter Value: <input class="addme" type="text" name="field1" size="1">
Enter Value: <input class="addme" type="text" name="field2" size="1">
Enter Value: <input class="addme" type="text" name="field3" size="1">
etc.....
<div>Result:<span id="result"></span></div>
</form>

Is it possible to add these up? And if so, can it be done anytime one of the input fields changes?

Thanks.

UPDATE: Brian posted a cool collaborative sandbox so I edited the code to look more like what I have and it's here: http://jsbin.com/orequ/ to edit go here: http://jsbin.com/orequ/edit

Answer 1

Try this

$(".addme").bind("change",function(){
    var _sum = 0;

    $(".addme").each(function(i){
        _sum += parseInt($(this).val());
    });

    $("#result").val(_sum);
});

HTH Alex

Answer 2

Sticking this right after the </form> tag should do it:

<script>
  function displayTotal() {
    var sum = 0

    var values = $('.addme').each(function(){
      sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
    });

    $('#result').text(sum);
  }
  $('.addme').keyup(displayTotal);
</script>

Here's a demo: http://jsbin.com/iboqo (Editable via http://jsbin.com/iboqo/edit)

Answer 3

Any non numeric or blank values will be disregarded in the calculation (they'll be given a value of zero and hence not affect the sum).

function sumValues() {
    var sum = 0;

    $("input.addme").each(function(){
        var $this = $(this);
        var amount = parseInt($this.val(), 10);
        sum += amount === "" || isNaN(amount)? 0 : amount;
    });

    $("#result").text(sum);
}

$(function() {

  sumValues();

  $("input.addme").keyup(function(){
    sumValues();
  });

});

Working Demo

Answer 4

(function(){
    var context = $("form"), elements = $("input.addme", context);
    function getSum(elements) {
     var sum = 0;
     $(elements, context).each( function() {
      var v = parseInt(this.value);
      v === parseInt(v,10) ? sum += v : sum = sum;
     })
     return sum;
    }
    $(elements).bind("keyup", function() {
     $("#result").text( getSum(elements) );
    });
})();

isolated scope and context, included dealing with non-integer values, function getSum should rather return a value than do something itself.