get total of all input values with jqeury

Question

Hey,

I need the total of all the values from my input, the result must be displayed in the input field total that is readonly. The user can enter 1 or more values. The problem is that my var value is not correct, and how can i return the value immediately by onchange?

script type="text/javascript">
$(document).ready(function() {

  $("div#example input").change(function() {
    var value = '';    
    $("div#example input[name!=total]").each(function() {
      value += $(this).val();      
    });
    console.log("value after each: " + value);
  });
})

</script> 

<div id="example">
   <input type="text" size="5" id="value1" name="value1" />
   <input type="text" size="5" id="value2" name="value2" />
   <input type="text" size="5" id="value3" name="value3" />
   <input type="text" size="5" id="value4" name="value4" />
   <input type="text" size="5" id="value5" name="value5" />
   <input type="text" size="5" id="total" readonly="readonly" class="bckground" name="total" />

Answer 1

use += parseInt($(this).val());

Answer 2

var sum = 0;  
$('input[id^=value]').each (function(){ sum+=$(this).val(); });
$('#total').val( sum );

:]

Answer 3

Try something like this:

$(document).ready(function() {
    $("div#example id^='value'").change(function() {
        var value = 0;

        $("div#example input[name!=total]").each(function() {
            var i = parseInt($(this).val());

            if (!isNaN(i))
            {
                value += i;
            }
        });

        $('#total').val(value);
    });
})

Answer 4

I think this might be closer:

<script type="text/javascript">

$(document).ready(function() {

  $("#example value").change(function() {
    var total = 0;    
    $("#example value").each(function() {
      total += parseInt($(this).val());      
    });
    window.console && console.log("value after each: " + total);
  });
})

</script> 

<div id="example">
   <input type="text" size="5" class="value" name="value1" />
   <input type="text" size="5" class="value" name="value2" />
   <input type="text" size="5" class="value" name="value3" />
   <input type="text" size="5" class="value" name="value4" />
   <input type="text" size="5" class="value" name="value5" />
   <input type="text" size="5" id="total" readonly="readonly" class="bckground" name="total" />
</div>

Your original selector for $.change() was including the total box, which I suspect you don't want.

Am I correct in guessing you want to add numbers? Your original 'value' variable was a string.

And BTW, it's safer to use the 'window.console && console.log' idiom, since there won't be a console variable for many users. (Though I bet that line was only there for debugging.)

EDIT

Added parseInt() based on other suggestions.

Answer 5

Use the jQuery form serialization:

alert($("form_id").serialize());

There is also a comparison for different serialization types: http://jquery.malsup.com/form/comp/