In this
article I will explain how to get running sum of all the asp.net textbox values
using jQuery and display in Label or Textbox control.
Sometime
it is required to get running total of textbox values. This can be done by
using server side code in asp.net or Using Jquery.
Suppose we want to get 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.
Suppose we want to get 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.
I have
used jQuery to accomplish this task. Jquery is easy and fast when compared to
server side code.
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.
Source
Code:
<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><strong>Running
Total of all Items in TextBoxes</strong></legend>
<table border="1px" cellpadding="5" style="border-collapse: collapse;">
<tr style="text-align: left;">
<th>
No.</th>
<th>
Item
</th>
<th>
Price
</th>
</tr>
<tr>
<td>
1
</td>
<td>
Book1:
</td>
<td>
<asp:TextBox ID="txtBook" CssClass="clsTxtToCalculate" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Pen:
</td>
<td>
<asp:TextBox ID="txtPen" CssClass="clsTxtToCalculate" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Board:
</td>
<td>
<asp:TextBox ID="txtBoard" CssClass="clsTxtToCalculate" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
4
</td>
<td>
Calculator:
</td>
<td>
<asp:TextBox ID="txtCalculater" 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>
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));
0 comments:
Post a Comment