使用 Javascript 从文本框实时计算总计答案

【问题标题】：Calculating Total from Textbox live using Javascript使用 Javascript 从文本框实时计算总计
【发布时间】：2013-03-06 15:46:02
【问题描述】：

我正在编写一个脚本，该脚本本质上应该是每次用户在选定的文本框中输入值时更新表单的总成本。我的问题是我不确定为什么即使在通话后它也没有更新。我知道我在某个地方犯了错误，但我还不确定在哪里。

 $(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);
}

这是它的html部分：

<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" />

【问题讨论】：

你可以在里面放一些alert('test'); 来告诉你哪里出了问题。你确定你包含了 jquery 吗？
@rlb.usa 我确定我在控件顶部添加了 Js
你为什么使用getElementById而不是jQuery选择器？
@ChruS 我想我是这样使用的，因为当我使用 getelementbyID 时它似乎工作得更顺畅，但我现在会尝试这种方式

标签： javascript asp.net html

【解决方案1】：

服务器控件需要设置为ClientIDMode="Static"或使用<%= %>从客户端访问。

您还想将字符串转换为浮点数来计算总数。

<%@ 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>

【讨论】：

我复制了我测试过的完全相同的工作代码。如果不起作用，请告诉我 - 如果有，请确保包含 javascript 错误。
好的，当它在页面上时它可以工作，但我正在尝试将它作为链接的 js 文件，它似乎没有工作
您不能将链接的js与#<%= ... %>一起使用。您需要将这些文本框的 id 转换为 ClientIDMode="Static"。
嘿@Win 我对我的代码做了一些更改，想知道是否可以寻求您的帮助？
当然。你能创建一个新问题吗？

【解决方案2】：

1) 传递客户 ID

<%=ElementName.ClientID%>

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

2) 使用 onClientClick 代替 onClick

3) 使用value 代替val() 或使用

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

【讨论】：

【解决方案3】：

去掉内联的onclick，使用下面的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);
}

【讨论】：

您是否尝试过删除第一行代码，并取消注释下面的代码块？您也可以尝试将函数调用包装在绑定中： $(".narrow").on('click', function() { ComputeCosts(); }); $("#txtTotalCost").on('blur', function() { ComputeCosts(); });
我试过了。想知道我们是否需要尝试在聊天中得到这个
尝试通过 ID 属性访问输入元素，省略数字部分：$("input[id^='txtPAmount']").each($(this).on('click' , function(){ ComputeCosts(); }));