<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> </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>
Code language: JavaScript (javascript)$(document).ready() is called which gets triggered whenever the webpage is loaded.$(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. 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.$("#sum").html(sum) code. You may want to display the sum in some textbox or some other place. Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…
Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…
Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…
1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…
GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…
1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…
View Comments
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 ?
Hi everyone,
I want to learn jquery from the basis with the java. so i dont know where & how to start and please help in this.
HOW CAN RETRIVE TEXTBOX VALUE FROM FORM.IF TEXBOX IS CRATE IN A LOOP .
THIS IS MY PROBLEM PLEASE TELL ME SOON
OK
thanks for help..............
this code is working well..............
every one can use this code for addition..........