adding numbers in texboxes - addition

Question

I have 7 text boxes. I want to add the value of 7 and insert the total in to another textbox. How can i achieve that with out postback. I have also tried to update panel but it is not working. my code is as follows. ANy suggestions in this regards would be much appreciable
If Page.IsPostBack Then
Dim A1 As Double
A1 = A_SAtxt.Text
Dim A2 As Double
A2 = A_SStxt.Text
Dim A3 As Double
A3 = A_RAtxt.Text
Dim A4 As Double
A4 = A_CAtxt.Text
Dim A5 As Double
A5 = A_OItxt.Text
Dim A6 As Double
A6 = A_ICtxt.Text
Dim A7 As Double
A7 = A_Otxt.Text
Dim ATotal = A1 + A2 + A3 + A4 + A5 + A6 + A7
End If
I working in asp.net with VB. textbox code in asp.net is as follows
<table width="100%">
<tr>
<td align="left" style="border:1px solid #cccccc; text- align: right; background-color: #F0F0F0;"
valign="top" class="style7" width = "400px">
<asp:Label ID="Label154" runat="server" Text="Savings account $"></asp:Label>
</td>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: left; background-color: #F0F0F0;"
valign="top">
<asp:TextBox ID="A_SAtxt" runat="server" CssClass="DrpItems10"
style="text-align: left" MaxLength="25"></asp:TextBox>
</td>
</tr>
<tr>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: right; background-color: #F0F0F0;"
valign="top">
<asp:Label ID="Label155" runat="server" Text="Stock and securities $"></asp:Label>
</td>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: left; background-color: #F0F0F0;"
valign="top">
<asp:TextBox ID="A_SStxt" runat="server" CssClass="DrpItems10"
style="text-align: left" MaxLength="25"></asp:TextBox>
</td>
</tr>
<tr>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: right; background-color: #F0F0F0;"
valign="top">
<asp:Label ID="Label156" runat="server" Text="Retirement accounts $"></asp:Label>
</td>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: left; background-color: #F0F0F0;"
valign="top">
<asp:TextBox ID="A_RAtxt" runat="server" CssClass="DrpItems10"
style="text-align: left" MaxLength="25"></asp:TextBox>
</td>
</tr>
<tr>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: right; background-color: #F0F0F0;"
valign="top">
<asp:Label ID="Label157" runat="server" Text="Checking account $"></asp:Label>
</td>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: left; background-color: #F0F0F0;"
valign="top">
<asp:TextBox ID="A_CAtxt" runat="server" CssClass="DrpItems10"
style="text-align: left" MaxLength="25"></asp:TextBox>
</td>
</tr>
<tr>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: right; background-color: #F0F0F0;"
valign="top">
<asp:Label ID="Label158" runat="server" Text="Other investments $"></asp:Label>
</td>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: left; background-color: #F0F0F0;"
valign="top">
<asp:TextBox ID="A_OItxt" runat="server" CssClass="DrpItems10"
style="text-align: left" MaxLength="25"></asp:TextBox>
</td>
</tr>
<tr>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: right; background-color: #F0F0F0;"
valign="top">
<asp:Label ID="Label159" runat="server" Text="Insurace cash-in-value $"></asp:Label>
</td>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: left; background-color: #F0F0F0;"
valign="top">
<asp:TextBox ID="A_ICtxt" runat="server" CssClass="DrpItems10"
style="text-align: left" MaxLength="25"></asp:TextBox>
</td>
</tr>
<tr>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: right; background-color: #F0F0F0;"
valign="top">
<asp:Label ID="Label160" runat="server" Text="Other $"></asp:Label>
</td>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: left; background-color: #F0F0F0;"
valign="top">
<asp:TextBox ID="A_Otxt" runat="server" CssClass="DrpItems10"
style="text-align: left" MaxLength="30"></asp:TextBox>
<asp:Label ID="Label188" runat="server" Text="specify:" Font-Italic="true"></asp:Label>
<asp:TextBox ID="A_OStxt" runat="server" CssClass="DrpItems10"
style="text-align: left" Width="250px" MaxLength="100"></asp:TextBox>
</td>
</tr>
<tr>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: right; background-color: #F0F0F0;"
valign="top">
<asp:Label ID="Label161" runat="server" Text="Total assets $"></asp:Label>
</td>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: left; background-color: #F0F0F0;"
valign="top">
<asp:TextBox ID="A_TAtxt" runat="server" CssClass="DrpItems10"
style="text-align: left" MaxLength="25"></asp:TextBox>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
I have even tried doing this but it doesn't seems to work
Dim sb As New System.Text.StringBuilder()
sb.Append("<script type = 'text/javascript'>")
sb.Append(" $(document).ready(function() {")
sb.Append(" var numberInput = $('#A_SAtxt, #A_SStxt, #A_RAtxt, #A_CAtxt,
#A_OItxt, #A_ICtxt, #A_Otxt');")
sb.Append(" numberInput.on('change', function() {")
sb.Append(" var total = 0;")
sb.Append("else{")
sb.Append(" numberInput.each(function() {")
sb.Append(" if ($(this).val() !== '') {")
sb.Append(" total += parseFloat($(this).val());")
sb.Append(" }")
sb.Append(" });")
sb.Append(" $('#A_TAtxt').val(total);")
sb.Append(" });")
sb.Append(" });​")
sb.Append("}};</script>")
ClientScript.RegisterClientScriptBlock(Me.GetType(), "function", sb.ToString())

Answer 1

You can use jQuery or javascript to calculate the sum of the 7 input boxes and insert the value into another input on the client side.
JAVASCRIPT
var total = 0;
$('#A_SAtxt, #A_SStxt, #A_RAtxt, #A_CAtxt, #A_OItxt, #A_ICtxt, #A_Otxt').each(function() {
if ($(this).val() !== '') {
total += parseFloat($(this).val());
}
});
$('#A_TAtxt').val(total);
DEMO
Here is an example of this code in action:
http://jsfiddle.net/AWGsw/2/
*EDIT 1*
To call this function on page load and to immediately add values on input blur, do the following:
JAVASCRIPT
$(document).ready(function() {
var numberInput = $('#A_SAtxt, #A_SStxt, #A_RAtxt, #A_CAtxt, #A_OItxt, #A_ICtxt, #A_Otxt');
numberInput.on('change', function() {
var total = 0;
numberInput.each(function() {
if ($(this).val() !== '') {
total += parseFloat($(this).val());
}
});
$('#A_TAtxt').val(total);
});
});
DEMO
http://jsfiddle.net/AWGsw/4/