Add various input fields together using javascript

Question

I have several text fields

<input class="add" type="text">
<input class="add" type="text">
<input class="add" type="text">
<input class="add" type="text">
<p id="total"></p>

The values in each field are added dynamically by a PHP script when the page is loaded but the user has the option to edit them. I have been trying to figure out a way to add up all the values using javascript and output them into the #total p tag. I have found a few scripts arround and tried writing one myself but it didnt seam to work.

The best I found looked like this....

function addAll() {
  var sum = ""

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

  $('#total').text(sum);
}
$('.add').keyup(displayTotal);

But that didn't output anything

Am I doing anything seriously wrong?

Cheers

You define a function called addAll() but your keyup event is calling a function called displayTotal() which we don't see here. Maybe you just used the wrong function reference? — Michael Berkowski
– Michael Berkowski, Commented Aug 13, 2012 at 13:49
@paiCode - Rather $(this).val() than this.val() - note this in callback is pure HTMLElement not jQuery items set. $(this).val() which is short hand for $(this).attr('value') ie exactly this.value — abuduba
– abuduba, Commented Aug 13, 2012 at 13:53
@paiCode: No, please don't. ;) this inside the callback references the element itself, it doesn't create a new jQuery object for each element. — Guffa
– Guffa, Commented Aug 13, 2012 at 13:53

Niklas · Accepted Answer · 2012-08-13 14:26:32Z

1

If it's numbers you're adding then this should work:

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

  $('#total').html(sum);
}
$('.add').keyup(addAll);

DEMO

If you want this to work on page load then add a call to addAll in the .ready() function. Here's the full code:

$(document).ready(function(){

  addAll();
  $('.add').keyup(addAll);  
})

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

  $('#total').html(sum);
}

edited Aug 13, 2012 at 14:26

answered Aug 13, 2012 at 13:58

Niklas

13.2k24 gold badges82 silver badges124 bronze badges

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

3 Comments

Chris Headleand Over a year ago

I tried this solution on this test page tutorplanner.com/untitled.html but still no joy... any ideas?

Chris Headleand Over a year ago

Ok, I relaised what I was doing wrong :) Is there anyway to make this work from page load? At the moment it only works once I have edited one of the values

Chris Headleand Over a year ago

That no only works when the page loads but not when the values are edited - tutorplanner.com/untitled.html - any idea?

PerL · Accepted Answer · 2012-08-13 13:53:28Z

1

var sum = 0;

sum += isNaN($(this).val()) || $.trim($(this).val()) === '' ? 0 : parseFloat(this.val());

answered Aug 13, 2012 at 13:53

PerL

561 bronze badge

Comments

abuduba · Accepted Answer · 2012-08-13 13:56:10Z

1

$('.add').keyup( function(){
  var sum = 0;

   $('.add').each(function(){
         sum +=  this.value && (this.value|0) && parseFloat( this.value ) || 0;
    });
   $('#total').text(sum);

});

answered Aug 13, 2012 at 13:56

abuduba

5,0637 gold badges29 silver badges43 bronze badges

Collectives™ on Stack Overflow

Add various input fields together using javascript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related