Sum textbox values using JavaScript

[adinserter block=”34″]

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”]

Sum textbox values using JavaScript

Last update: July 10, 2013

Date posted: July 10, 2013

Created by ninjazhai

Related Tutorials