Question

我如何在javascript / asp中添加两个文本框值并显示在第三个？

我的JS代码

[]

页面加载中的ASP

 function sum() {
      var txtFirstNumberValue = document.getElementById('TextBox1').value;
      var txtSecondNumberValue = document.getElementById('TextBox2').value;
      var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
      if (!isNaN(result)) {
          document.getElementById('TextBox3').value = result;
      }
  }

Answer 1

你应该知道的一件事：

默认情况下，ASP.NET使用自动生成的ClientID属性供ASPX页面中的TextBox控件使用，这样您的文本框ID在呈现后将变为<input id="ctl00_ContentPlaceHolder1_TextBox1" type="text" ... />。要在客户端使用服务器控件名称，您需要使用ClientID，如下所示：

function sum() {
    var txtFirstNumberValue = document.getElementById('<%= TextBox1.ClientID %>').value;
    var txtSecondNumberValue = document.getElementById('<%= TextBox2.ClientID %>').value;
    var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
    if (!isNaN(result)) {
        document.getElementById('<%= TextBox3.ClientID %>').value = result;
    }
}

避免在客户端使用生成的ClientID的另一种方法是将ClientIDMode设置为静态，以下是使用它的示例：

<%-- control level --%>
<asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static" ... />

<%-- placeholder level --%>
<asp:Content ID="Content1" runat="server" ClientIDMode="Static" ...>...</asp:Content>

<%-- page level --%>
<%@ Page Language="C#" ClientIDMode="Static" AutoEventWireup="true" ... %>

参考：

ClientID Property

Set HTML Attributes for Controls in ASP.NET Web Pages

Answer 2

您可以在aspx中使用以下代码，而无需使用代码。

<asp:textbox id="TextBox1" cssclass="sum" runat="server" />
<asp:textbox id="TextBox2" cssclass="sum" runat="server" />
<asp:textbox id="txtResult" runat="server" />

<script>
    $(document).ready(function () {
        //this calculates values automatically 
        calculateSum();

        $(".sum").on("keydown keyup", function () {
            calculateSum();
        });
    });

    function calculateSum() {
        var sum = 0;
        //iterate through each textboxes and add the values
        $(".sum").each(function () {
            //add only if the value is number
            if (!isNaN(this.value) && this.value.length != 0) {
                sum += parseFloat(this.value);
                $(this).css("background-color", "#FEFFB0");
            }
            else if (this.value.length != 0) {
                $(this).css("background-color", "red");
            }
        });

        $("#<%=this.txtResult.ClientID%>").val(sum.toFixed(2));
    }
</script>

javascript添加两个文本框值并在asp.net中显示第三个

2 个答案: