Sum HTML Textbox Values using jQuery / JavaScript
- By Viral Patel on July 21, 2009
- JQuery, JavaScript
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.
<html>
<head>
<title>Sum Html Textbox Values using jQuery/JavaScript</title>
<style>
body {
font-family: sans-serif;
}
#summation {
font-size: 18px;
font-weight: bold;
color:#174C68;
}
.txt {
background-color: #FEFFB0;
font-weight: bold;
text-align: right;
}
</style>
<script src="jquery-1.3.2.min.js"></script>
</head>
<body>
<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
<tr>
<td width="40px">1</td>
<td>Butter</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>2</td>
<td>Cheese</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>3</td>
<td>Eggs</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>4</td>
<td>Milk</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>5</td>
<td>Bread</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>6</td>
<td>Soap</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Sum :</td>
<td align="center"><span id="sum">0</span></td>
</tr>
</table>
<script>
$(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function() {
$(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum() {
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
$("#sum").html(sum.toFixed(2));
}
</script>
</body>
</html>
Let us step by step see what above code is doing.
- First the
$(document).ready()is called which gets triggered whenever the webpage is loaded. - 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 triggercalculateSum()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. - 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. - 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
Click here to view online Demo
Get our Articles via Email. Enter your email address.
Can I use it on my wesite?
Annegärd
Hi Annegärd, Feel free to use above code in your website :) If you want, you can link to this tutorial from your site.
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
$(function() {
$(‘input.txt’).keyup(calculateSum);
} );
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).
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 :)
Thanks
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!
@Bogdan: Thanks for finding the bug in final sum calculation. I have added .toFixed() the code at line #86. .toFixed(2) method will round off the final sum at 2 decimal places.
I have also fixed the demo.
Thanks again :)
Is it possible in a ASP.Net text box under a grid? If possible, how?
Can it be done with asp.net textbox control ? and sum into one more text box ?
Hi Viral,
Can it be done with asp.net textbox control ? and sum into one more text box ?