Sum HTML Textbox Values using jQuery / JavaScript

sum-html-textbox-value-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="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.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>&nbsp;</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.

  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


Click here to view online Demo

Get our Articles via Email. Enter your email address.

You may also like...

128 Comments

  1. Scotty G says:

    How do I make this display the TOTAL in another TextBox, not in a table cell?
    Here is example:

    <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 id="summation">
    				<td>&nbsp;</td>
    				<td align="right">Sum :</td>
    				<td align="center"><span id="sum">0</span></td>
    			</tr>
    		</table>
    
    		<script>$(document).ready(function(){$(":text").each(function(){$(this).keyup(function(){calculateSum();});});});function calculateSum(){var sum=0;$(":text").each(function(){if(!isNaN(this.value)&&this.value.length!=0){sum+=parseFloat(this.value);}});$("#sum").html(sum.toFixed(2));}</script>
    	</body>
    </html>
    
    

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>