jQuery to calculate Running Total of Asp.Net Textbox values and show in Label or TextBox control

Introduction: In this article i am going to explain how to get running sum of all the asp.net textbox values using jQuery and display in Label or Textbox control.

jQuery to calculate Running total of asp.net textbox values and show in Label or TextBox control
Description:  While working on asp.net project I got the requirement to implement the functionality of getting running total of item price in label or textbox as soon as they are entered. Whenever we enter the price of any item in the textbox, total price gets updated in the label reflecting the Total Price as you can see in the demo image above.

The concept is very easy. You just need to assign the CssClass (e.g. "clsTxtToCalculate"  in this article) to each textbox that will participate in running total.  Then iterate through each textbox having class "clsTxtToCalculate" and get the value of the textbox on keyup event and calculate the total and show in label or textbox.


Implementation:  Let's create a simple website page (default.aspx) to demonstrate the concept. Below is the HTML source and the required jQuery script.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //Iterate through each Textbox and add keyup event handler
            $(".clsTxtToCalculate").each(function () {
                $(this).keyup(function () {
                    //Initialize total to 0
                    var total = 0;
                    $(".clsTxtToCalculate").each(function () {
                        // Sum only if the text entered is number and greater than 0
                        if (!isNaN(this.value) && this.value.length != 0) {
                            total += parseFloat(this.value);
                        }
                    });
                    //Assign the total to label
                    //.toFixed() method will roundoff the final sum to 2 decimal places
                    $('#<%=lblTotalPrice.ClientID %>').html(total.toFixed(2));
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <fieldset style="width: 315px;">
            <legend>Running Total of all TextBoxes</legend>
            <table border="1px" cellpadding="5" style="border-collapse: collapse;">
                <tr style="text-align: left;">
                    <th>
                        No.</hd>
                        <th>
                            Item
                        </th>
                        <th>
                            Price
                        </th>
                </tr>
                <tr>
                    <td>
                        1
                    </td>
                    <td>
                        Milk:
                    </td>
                    <td>
                        <asp:TextBox ID="txtMilk" CssClass="clsTxtToCalculate" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        2
                    </td>
                    <td>
                        Bread:
                    </td>
                    <td>
                        <asp:TextBox ID="txtBread" CssClass="clsTxtToCalculate" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        3
                    </td>
                    <td>
                        Noodles:
                    </td>
                    <td>
                        <asp:TextBox ID="txtNoodles" CssClass="clsTxtToCalculate" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        4
                    </td>
                    <td>
                        Cheese:
                    </td>
                    <td>
                        <asp:TextBox ID="txtCheese" CssClass="clsTxtToCalculate" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        <b>Total Price</b>
                    </td>
                    <td>
                        <asp:Label ID="lblTotalPrice" runat="server"></asp:Label>
                    </td>
                </tr>
            </table>
        </fieldset>
    </div>
    </form>
</body>
</html> 

Note: If you want to show the running total in TextBox instead of label then replace

<asp:Label ID="lblTotalPrice" runat="server"></asp:Label>
 With
<asp:TextBox ID="txtTotalPrice" runat="server"></asp:TextBox>

And $('#<%=lblTotalPrice.ClientID %>').html(total.toFixed(2));
With
$('#<%=txtTotalPrice.ClientID %>').val(total.toFixed(2)); 

Now over to you:
" I hope you have learned how to calculate Running total of textbox values and show in Label or TextBox control using jQuery with this example and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates."
Previous
Next Post »

4 comments

Click here for comments
Anonymous
admin
September 03, 2014 ×

Nice article .. I am seeing your article over 6 months.Your explanation is very good and i can easily understand.Keep it up sir.

Reply
avatar
September 08, 2014 ×

thanks Abul Fazal..i am glad you found this article useful..

Reply
avatar
September 08, 2014 ×

Thanks for your valuable feedback..

Reply
avatar

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..