jQuery adding multiple text boxes

Question

I wonder if anyone could help me.

I have a web page where there are some text boxes (dynamic amount, could be 3, could be 30) and each one a user can enter a number and I have a total count at the bottom.

At present I have this:

$('input.qty').change(function() {
// Get the current total value
var total = $('#total');
// Update it with the changed input's value
total.val(parseInt(total.val()) + parseInt($(this).val()));
});

Example HTML:

<td><input type="text" class="qty" value="0" /></td>
<td><input type="text" class="qty" value="0" /></td>
<td><input type="text" class="qty" value="0" /></td>
<td><input type="text" id="total" value="0" /></td>

which adds fine first time, but when you start changing values it simply adds the new amount to the total rather then adding all the boxes up.

How can I sort this? Perhaps use the each attr somehow?

Nick Craver · Accepted Answer · 2010-08-17 00:11:12Z

2

You can loop through them all using a .each() and sum them up, like this:

$('input.qty').change(function() {
  var sum = 0;
  $('input.qty').each(function() { sum += parseInt(this.value, 10); });
  $('#total').val(sum);
});

You can give it a try here, if you want it to calc on every keypress then use .keyup() instead of .change(), like this.

answered Aug 17, 2010 at 0:11

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

Collectives™ on Stack Overflow

jQuery adding multiple text boxes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related