Get Running Total of TextBox Values in ASP.NET

Jaipal Reddy
9y
10.7k
0
1

Blog

Currently I am working in health care domain, In that i got the requirement to implement the functionality of getting running total of Service price (which is used by patient) in textbox as soon as they are entered. Whenever we enter the price of any Service in the textbox, total price gets updated in the bottom of the Textbox reflecting the Total Price.

To achieve that just we need to assign the CssClass (e.g. "calculate" in this article) to each textbox that will participate in running total. Then iterate through each textbox having class "calculate" and get the value of the textbox on keyup event and calculate the total and show in label or textbox.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RunningTotalofTextBox.aspx.cs"
Inherits="CsharpCornerExamples.Application.RunningTotalofTextBox" %>
<!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 runat="server">
<title></title>
<script src="../JScripts/jquery-1.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".calculate").each(function () {
$(this).keyup(function () {
var total = 0;
$(".calculate").each(function () {
if (!isNaN(this.value) && this.value.length != 0) {
total += parseFloat(this.value);
}
});
$('#<%=txtTotalPrice.ClientID %>').val(total.toFixed(2));
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="1px">
<tr style="text-align: left;">
<th>
Book
</th>
<th>
Price
</th>
</tr>
<tr>
<td>
C#.Net:
</td>
<td>
<asp:TextBox ID="txtCshrp" CssClass="calculate" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Asp.Net:
</td>
<td>
<asp:TextBox ID="txtAsp" CssClass="calculate" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Sql Server:
</td>
<td>
<asp:TextBox ID="txtSqlServer" CssClass="calculate" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
JQuery:
</td>
<td>
<asp:TextBox ID="txtJQuery " CssClass="calculate" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<b>Total Price</b>
</td>
<td>
<asp:TextBox ID="txtTotalPrice" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

Output

output

I hope you enjoyed it.

Up Next

Clear textboxes values in asp.net

Ebook Download

View all

ASP.NET GridView Control Pocket Guide

Read by 2.8k people

Download Now!

Learn

View all