DotnetProgramming: Adding numbers and display running total using Javascript

In this blog I would like to share how we can sum the text box values and display it in the result text box or label,

your aspx page should be as follows

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="sumTextboxes.aspx.cs" Inherits="NonPrimaryKeyTable.sumTextboxes" %>

<!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 type="text/javascript">
function multiplication(txtBox1, txtBox2, txtBox3, txtBox4) {
var col1;
var totalcol1 = 0;
var weight = document.getElementById(txtBox1).value;
var rate = document.getElementById(txtBox2).value;
var txt3 = document.getElementById(txtBox3).value;
var txt4 = document.getElementById(txtBox4).value;

if (weight != '') {
totalcol1 = parseInt(weight);
document.getElementById('<%= txtResult.ClientID %>').value = totalcol1.toString();
if (rate != '') {
totalcol1 += parseInt(rate);
document.getElementById('<%= txtResult.ClientID %>').value = totalcol1.toString();
}
if (txt3 != '') {
totalcol1 += parseInt(txt3);
document.getElementById('<%= txtResult.ClientID %>').value = totalcol1.toString();
}
if (txt4 != '') {
totalcol1 += parseInt(txt4);
document.getElementById('<%= txtResult.ClientID %>').value = totalcol1.toString();
}
}

}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<center>
<table>
<tr>
<td>
<asp:TextBox ID="txt1" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="regexp" runat="server" ControlToValidate="txt1"
ErrorMessage="*" ToolTip="Only numbers" ForeColor="Red" Display="Dynamic" ValidationExpression="^(\d+)?$"></asp:RegularExpressionValidator>
</td>
<td>
</td>
<td>
<asp:TextBox ID="txt2" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="regexp1" runat="server" ControlToValidate="txt2"
ErrorMessage="*" ToolTip="Only numbers" ForeColor="Red" Display="Dynamic" ValidationExpression="^(\d+)?$"></asp:RegularExpressionValidator>
</td>
<td>
</td>
<td>
<asp:TextBox ID="txt3" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="regexp2" runat="server" ControlToValidate="txt3"
ErrorMessage="*" ToolTip="Only numbers" ForeColor="Red" Display="Dynamic" ValidationExpression="^(\d+)?$"></asp:RegularExpressionValidator>
</td>
<td>
</td>
<td>
<asp:TextBox ID="txt4" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="regexp3" runat="server" ControlToValidate="txt4"
ErrorMessage="*" ToolTip="Only numbers" ForeColor="Red" Display="Dynamic" ValidationExpression="^(\d+)?$"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr align="center">
<td colspan="3" align="center">
<asp:TextBox ID="txtResult" ReadOnly="true" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</center>
</div>
</form>
</body>
</html>

and in your aspx.cs write this

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

txt1.Attributes.Add("onBlur", "return multiplication('" + txt1.ClientID + "','" + txt2.ClientID + "','" + txt3.ClientID + "','" + txt4.ClientID + "')");

txt2.Attributes.Add("onBlur", "return multiplication('" + txt1.ClientID + "','" + txt2.ClientID + "','" + txt3.ClientID + "','" + txt4.ClientID + "')");

txt3.Attributes.Add("onBlur", "return multiplication('" + txt1.ClientID + "','" + txt2.ClientID + "','" + txt3.ClientID + "','" + txt4.ClientID + "')");

txt4.Attributes.Add("onBlur", "return multiplication('" + txt1.ClientID + "','" + txt2.ClientID + "','" + txt3.ClientID + "','" + txt4.ClientID + "')");

}

Finally here is what you have