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.