Sum HTML Textbox Values using jQuery #html #email #javascript


#

Sum HTML Textbox Values using jQuery / JavaScript

by Viral Patel July 21, 2009


Here is a small code snippet to sum the values of all textboxes in a form in JavaScript using jQuery. I wrote it for some functionality and thought to share it with you all. The requirement is simple, whenever user modify the value of a textbox, the fresh sum should be calculated and displayed on the form. I used jQuery for this as it provides simple way of selecting elements and iterating through them.

Source Code

Following is the complete source code.

Let us step by step see what above code is doing.

  1. First the $(document).ready() is called which gets triggered whenever the webpage is loaded.
  2. Inside $(document).ready(). we selected all textboxes by the class name .txt and iterate through each of them and added event handler on keydown event. Thus whenever keypress event will occur, the code will trigger calculateSum() function. Note that you may want to change the selector code that suits your html elements. In this case we selected textboxes based on class= txt as all textbox has this class.
  3. The keydown event triggers the function calculateSum(). In this function again we iterate through each textboxes and sum up the values in a variable sum. Note that we have checked whether the value is number before adding it to the sum.
  4. Finally we update the innerHTML property of span #sum using $(“#sum”).html(sum) code. You may want to display the sum in some textbox or some other place.

Online Demo

Related Articles

5 September, 2009, 15:58

I would highly recommend using $( input.txt ) as the selector as opposed to only $( .txt ) as this will cause all element nodes within the DOM to be checked to see if they have the class name .txt . Secondly, there is no need to use each() on the wrapped set to iterate through and bind an event handler to each element- binding an event handler to the wrapped set will bind the event handler to each element within the wrapped set by default. Thirdly, rather than binding an anonymous function to the keyup event which is only executing calculateSum(), you can just bind calculateSum to the keyup event directly. So, the code becomes

Reducing the length of the scope chain all over and improving performance speed (although in reality for this demo, it s doubtful that the performance difference will be noticeable).

5 September, 2009, 19:04

Hi Russ,
Thanks for the update. I agree with your suggestion of using input.txt as selector rather than .txt . It definitely reduce the scope of selector there by improving performance of the code. I will make changes in above code 🙂

9 February, 2010, 22:14

Hi Patel,
Excellent job, well done. I was interested to use it but I ve found a bug easy to reproduce: just put these values in your demo and check the result: 1.22; 1.22; 1; 1; 1; 1. It shows 6.4399999999999995 instead of 6.44. Is there a way to fix that?
Thanks!

9 February, 2010, 22:44

I now want to implement a complex form that has subtotals. I tried duplicating script in the body tag like these;

//iterate through each textboxes and add keyup
//handler to trigger sum event
$( .txt ).each(function() <

var sum = 0;
//iterate through each textboxes and add the values
$( .txt ).each(function() <

//add only if the value is number
if(!isNaN(this.value) this.value.length!=0) <
sum += parseFloat(this.value);
>

>);
//.toFixed() method will roundoff the final sum to 2 decimal places
$( #subtotal1 ).val(sum.toFixed(2));
>

//iterate through each textboxes and add keyup
//handler to trigger sum event
$( .txt ).each(function() <

var sum = 0;
//iterate through each textboxes and add the values
$( .txt ).each(function() <

//add only if the value is number
if(!isNaN(this.value) this.value.length!=0) <
sum += parseFloat(this.value);
>

>);
//.toFixed() method will roundoff the final sum to 2 decimal places
$( #subtotal2 ).val(sum.toFixed(2));
>

The problem now is that when i input a value, the subtotal2 totals everything while subtotal1 is empty.

What should i do?

Bhavik Dharaiya says:


Leave a Reply

Your email address will not be published. Required fields are marked *