Sum textbox values using JavaScript
A friend asked me how to sum textbox values using JavaScript? He wants to do this as he type the numbers.
Here’s a quick answer to that:
Give all your TextBoxes a class name and use the jQuery ‘keyup()’ and ‘each()’ methods to compute the sum.
HTML - a table where the product name and price TextBox is found.
<table>
<tr>
<td>Product Name</td>
<td>Price</td>
</tr>
<tr>
<td>MOBILE POWER BANK (2800MAH)</td>
<td><input type='text' class='price' /></td>
</tr>
<tr>
<td>DISNEY NECK REST PILLOW (CHIP)</td>
<td><input type='text' class='price' /></td>
</tr>
<tr>
<td></td>
<td><input type='text' id='totalPrice' disabled /></td>
</tr>
</table>
jQuery - methods we used include keyup, each and val. Read comments on code.
<script>
// we used jQuery 'keyup' to trigger the computation as the user type
$('.price').keyup(function () {
// initialize the sum (total price) to zero
var sum = 0;
// we use jQuery each() to loop through all the textbox with 'price' class
// and compute the sum for each loop
$('.price').each(function() {
sum += Number($(this).val());
});
// set the computed value to 'totalPrice' textbox
$('#totalPrice').val(sum);
});
</script>
Complete Code:
<html>
<head>
<title>jQuery Sum Demo</title>
</head>
<body>
<table>
<tr>
<td>Product Name</td>
<td>Price</td>
</tr>
<tr>
<td>MOBILE POWER BANK (2800MAH)</td>
<td><input type='text' class='price' /></td>
</tr>
<tr>
<td>DISNEY NECK REST PILLOW (CHIP)</td>
<td><input type='text' class='price' /></td>
</tr>
<tr>
<td></td>
<td><input type='text' id='totalPrice' disabled /></td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script>
// we used jQuery 'keyup' to trigger the computation as the user type
$('.price').keyup(function () {
// initialize the sum (total price) to zero
var sum = 0;
// we use jQuery each() to loop through all the textbox with 'price' class
// and compute the sum for each loop
$('.price').each(function() {
sum += Number($(this).val());
});
// set the computed value to 'totalPrice' textbox
$('#totalPrice').val(sum);
});
</script>
</body>
</html>
This post will be updated if any variation occurs. :)
Download Source Code
You can download all the code used in this tutorial for only $9.99 $5.55!
[purchase_link id="12278" text="Download Now" style="button" color="green"]
Related Tutorials
Thank you for learning from our post about Sum TextBox Values As You Type in jQuery.
Hi! I'm Mike Dalisay, the co-founder of codeofaninja.com, a site that helps you build web applications with PHP and JavaScript. Need support? Comment below or contact [email protected]
I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on LinkedIn, Twitter, Facebook, and Instagram.