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.
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.
In previous articles i explained How to Clear or reset all asp.net controls on web page and jQuery to limit and display number of characters left in asp.net multiline textbox and jQuery to Check Uncheck all items in CheckBoxList on click of Select All CheckBox and Validate,upload,crop and store image in folder in asp.net using jQuery and Server side validation code for TextBox,DropDownList,CheckBoxList,RadioButtonList,ListBox and Delete multiple records from asp.net gridview with checkbox selection
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>
</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));
" 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."
4 comments
Click here for commentsNice article .. I am seeing your article over 6 months.Your explanation is very good and i can easily understand.Keep it up sir.
Replygood
Replythanks Abul Fazal..i am glad you found this article useful..
ReplyThanks for your valuable feedback..
ReplyIf 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..