Calculating Total from Textbox live using Javascript

Question

I am working on a script that should essentially be updating the total costs of a form everytime the user enters a value in selected textboxes. My problem is I am not sure why it is not updating even after calls. I know I made a mistake somewhere I am just not sure where yet.

 $(document).ready(function () {
      var total = document.getElementById(txtTotalCost);
      ComputeCosts();

      total.blur(function () {
        ComputeCosts();
    });

});

function ComputeCosts()
{
    var amount1 = document.getElementById(txtPAmount1);
    var amount2 = document.getElementById(txtPAmount2);
    var amount3 = document.getElementById(txtPAmount3);
    var amount4 = document.getElementById(txtPAmount4);
    var amount5 = document.getElementById(txtPAmount5);
    var totalBox = document.getElementById("txtTotalCost");          

    var totalGift = (txtPAmount1.val() +txtPAmount2.val() + txtPAmount3.val()+txtPAmount4.val()+txtPAmount5.val()).toFixed(2);
    totalBox.val(totalGift);
}

Here is the html side of it:

<asp:TextBox runat="server" ID="txtPAmount1" CssClass="narrow" onClick="ComputeCosts();" text="0.00" />
<asp:TextBox runat="server" ID="txtPAmount2" CssClass="narrow" onClick="ComputeCosts();" text="0.00" />  
<asp:TextBox runat="server" ID="txtPAmount3" CssClass="narrow" onClick="ComputeCosts();" text="0.00" />  
<asp:TextBox runat="server" ID="txtPAmount4" CssClass="narrow" onClick="ComputeCosts();" text="0.00" />  
 <asp:TextBox runat="server" ID="txtTotalCost" CssClass="narrow" onClick="ComputeCosts();" text="0.00" />

Answer 1

1) Pass Client ID

<%=ElementName.ClientID%>

document.getElementById("<%=ElementName.ClientID%>")

2) Use onClientClick instead of onClick

3) Use value instead val() or Use

var amount1 = $("#<%=txtPAmount1.ClientID%>");

Answer 2

Server controls need to be set as ClientIDMode="Static" or use <%= %> to access from client side.

You also want to convert string to float to calculate the total.

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="/Scripts/jquery-1.9.1.js"></script>
</head>
<body>
<form id="form1" runat="server">

<asp:TextBox runat="server" ID="txtPAmount1" CssClass="narrow" 
    onClick="ComputeCosts();" Text="0.00" ClientIDMode="Static" />
<asp:TextBox runat="server" ID="txtPAmount2" CssClass="narrow" 
    onClick="ComputeCosts();" Text="0.00" ClientIDMode="Static"/>
<asp:TextBox runat="server" ID="txtPAmount3" CssClass="narrow" 
    onClick="ComputeCosts();" Text="0.00" ClientIDMode="Static"/>
<asp:TextBox runat="server" ID="txtPAmount4" CssClass="narrow" 
    onClick="ComputeCosts();" Text="0.00" ClientIDMode="Static"/>
<asp:TextBox runat="server" ID="txtPAmount5" CssClass="narrow" 
    onClick="ComputeCosts();" Text="0.00" ClientIDMode="Static"/>
<asp:TextBox runat="server" ID="txtTotalCost" CssClass="narrow" 
    onClick="ComputeCosts();" Text="0.00" ClientIDMode="Static"/>

<script>
    $(document).ready(function () {
        var total = $('#txtTotalCost');
        ComputeCosts();

        total.blur(function () {
            ComputeCosts();
        });
    });

    function ComputeCosts() {
        var amount1 = parseFloat($('#txtPAmount1').val());
        var amount2 = parseFloat($('#txtPAmount2').val());
        var amount3 = parseFloat($('#txtPAmount3').val());
        var amount4 = parseFloat($('#txtPAmount4').val());
        var amount5 = parseFloat($('#txtPAmount5').val());

        var totalGift = (amount1+ amount2 + amount3 + amount4 + amount5);
        $('#txtTotalCost').val(totalGift);
    }
</script>
</form>
</body>
</html>

Answer 3

Remove the inline onclick, and use the following jQuery:

$(function () {
    ComputeCosts();

    $(".narrow").on('click', ComputeCosts).addBack().last().on('blur', ComputeCosts);

    /* 
    Above should work, if not seperate the binds
    $(".narrow").on('click', ComputeCosts);
    $("#txtTotalCost").on('blur', ComputeCosts);
    */
});

function ComputeCosts() {
    var amount1 = parseFloat($("#txtPAmount1").val());
    var amount2 = parseFloat($("#txtPAmount2").val());
    var amount3 = parseFloat($("#txtPAmount3").val());
    var amount4 = parseFloat($("#txtPAmount4").val());
    var amount5 = parseFloat($("#txtPAmount5").val());

    var totalGift = (amount1 + amount2 + amount3 + amount4 + amount5).toFixed(2);
    $("#txtTotalCost").val(totalGift);
}

Calculating Total from Textbox live using Javascript

Question

3 answers

solution1
0 2013-03-06 15:53:46

solution2
0 ACCPTED 2013-03-06 16:07:35

solution3
0 2013-03-06 16:09:41

Calculating Total from Textbox live using Javascript

Question

3 answers

solution1 0 2013-03-06 15:53:46

solution2 0 ACCPTED 2013-03-06 16:07:35

solution3 0 2013-03-06 16:09:41

solution1
0 2013-03-06 15:53:46

solution2
0 ACCPTED 2013-03-06 16:07:35

solution3
0 2013-03-06 16:09:41