javascript asp.netで2つのテキストボックス値を追加して3番目に表示

Question

javascript/aspで2つのテキストボックス値を追加して3番目に表示するにはどうすればよいですか？ページのロード中

私のJSコード

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; 
     } 
    } 

ASPにあなたが知っておくべき

TextBox1.Attributes.Add("onkeyup", "sum();"); 
TextBox2.Attributes.Add("onkeyup", "sum();"); 

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のコードは、コードを使用せずに使用できます。 `使い方などのClientID`` VAR txtFirstNumberValue =のdocument.getElementById（ '<％= TextBox1.ClientID％>'）。あなたは `のClientIDModeを設定していない場合は[値]は、（ASPX Webフォームページのために働く必要があります=」

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