javascriptの計算asp.netのテキストボックス

私は、ユーザーが数値を入力するマルチビューコントロールのいくつかのビューに一連のテキストボックスを持っています。ユーザーがテキストボックスA3とA4に数字を入力すると、合計がテキストボックスA5に表示され、無効になっているので、ユーザーはJavaScriptを使用して入力できません。ビュー全体を通して、この機能はテキストボックスの異なるペアで8回発生します。私の代わりにJavaScript関数を8回コピーすると、1つの関数を再利用できる方法があり、テキストボックスIDは唯一の違いになります。ユニの学習用JavaScriptはこれまでのところ基本的な知識しか持っていません。あなたは、次のようにテキストボックスのタグを編集する必要がありますjavascriptの計算asp.netのテキストボックス

はJavaScript

function A5Formula() { 
     var num1 = document.getElementById("<%=A3.ClientID %>"); 
     var num2 = document.getElementById("<%=A4.ClientID %>"); 

     var t1 = 0, t2 = 0; t3 = 0 

     if (num1.value != "") t1 = num1.value; 
     if (num2.value != "") t2 = num2.value; 
     t3 = parseInt(t1) + parseInt(t2); 

     document.getElementById("<%=A5.ClientID %>").value = t3; 
     document.getElementById("<%=A5hidden.ClientID %>").value = t3; 
    }

ASP.NET

<asp:TextBox ID="A3" runat="server" CssClass="inputcss" onblur="A5Formula()" CausesValidation="True" AutoCompleteType="Disabled"></asp:TextBox> 

    <asp:TextBox ID="A4" runat="server" CssClass="inputcss" onblur="A5Formula()" CausesValidation="True" AutoCompleteType="Disabled"></asp:TextBox> 

    <asp:TextBox ID="A5" runat="server" CssClass="inputcss" Enabled="False" AutoCompleteType="Disabled" ></asp:TextBox>

おかげ

簡体ウェブページ

 <%@ Page Language="VB" AutoEventWireup="false" 
     CodeFile="Default.aspx.vb" Inherits="_Default" %> 

     <!DOCTYPE html> 

     <html xmlns="http://www.w3.org/1999/xhtml"> 
     <head runat="server"> 
     <title></title> 
     <script language="javascript" type="text/javascript"> 
     function ANFormula(id1, id2, idResult) { 
      var num1 = document.getElementById(id1); 
      var num2 = document.getElementById(id2); 

      var t1 = 0, t2 = 0, t3 = 0; 

      if (num1.value != "") 
       t1 = num1.value; 
      if (num2.value != "") 
       t2 = num2.value; 
      t3 = parseInt(t1) + parseInt(t2); 

      document.getElementById(idResult).value = t3; 
     } 

    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div> 
      <table> 
       <tr> 
        <td> 
         <asp:Label ID="Label2" runat="server" Text="A3"> 
     </asp:Label> 
         <asp:TextBox ID="A3" runat="server" 
     onblur="ANFormula('<%=A3.ClientID %>', '<%=A4.ClientID %>', 
     '<%=A5.ClientID %>')"></asp:TextBox> 

        </td> 
        <td> 
         <asp:Label ID="Label3" runat="server" Text="A4"> 
    </asp:Label> 
         <asp:TextBox ID="A4" runat="server" 
     onblur="ANFormula('<%=A3.ClientID %>', '<%=A4.ClientID %>', 
     '<%=A5.ClientID %>')"></asp:TextBox></td> 
        <td> 
         <asp:Label ID="Label4" runat="server" Text="A5"> 
         </asp:Label> 
         <asp:TextBox ID="A5" runat="server"></asp:TextBox></td> 
        </tr> 
       </table> 
      </div> 
     </form> 
    </body> 
</html>

出典

2017-10-05 Allan McCaffery

https://stackoverflow.com/questions/15251780/calculating-total- from-textbox-live-using-javascript – Danieboy

Yあなたはデータ属性を使用することができます、私の答えをチェックしてください – hardkoded

あなたは答えを見直すことができましたアラン？ – hardkoded

：

<asp:TextBox ID="A3" runat="server" CssClass="inputcss" onblur="A5Formula(this);" CausesValidation="True" AutoCompleteType="Disabled"></asp:TextBox>

"this"をパラメータとして関数に追加すると、オブジェクトを関数に渡します（この場合はテキストボックスA3）。

とJavaScriptの関数で：

function A5Formula(e){ 
if (e.id=="A3" || e.id=="A4"){ 
//some processing code here depending on its id and do it for other ids 
} 
}

それは

出典

2017-10-05 13:56:26 JKOU

ファーストを変更するためにどのテキストボックス値を制御することができるように渡されたオブジェクトのIDをチェックし、あなたがparseIntことを伝える必要があります数字を小数の数字であるparseInt(t1, 10)に解析します。

data-属性を使用して、これらのコントロールをグループ化することができます。たとえば、idオペランドにはdata-add-operation、結果フィールドにはdata-add-operation-resultを指定します。

<asp:TextBox ID="A3" data-add-operation="8" runat="server" CssClass="inputcss" onblur="formula(event)" CausesValidation="True" AutoCompleteType="Disabled"></asp:TextBox> 

<asp:TextBox ID="A4" data-add-operation="8" runat="server" CssClass="inputcss" onblur="formula(event)" CausesValidation="True" AutoCompleteType="Disabled"></asp:TextBox> 

<asp:TextBox ID="A5" data-add-operation-result="8" runat="server" CssClass="inputcss" Enabled="False" AutoCompleteType="Disabled" ></asp:TextBox>

とJavaScriptで

function formula(e) { 
    var total = 0; 
    var groupId = $(e.sourceTarget).data("data-add-operation"); 

    $.each($("[data-add-operation=" + groupdId + "]", function(index, item) { 
     total += parseInt(item.val(), 10); 
    }); 

    $("[data-add-operation-result=" + groupdId + "]").val(total); 
}

出典

2017-10-05 13:58:09 hardkoded

はJavaScript

function ANFormula(id1, id2, idResult, idHidden) { 
    var num1 = document.getElementById(id1); 
    var num2 = document.getElementById(id2); 

    var t1 = 0, t2 = 0, t3 = 0; 

    if (num1.value != "") 
    t1 = num1.value; 
    if (num2.value != "") 
    t2 = num2.value; 
    t3 = parseInt(t1) + parseInt(t2); 

    document.getElementById(idResult).value = t3; 
    document.getElementById(idHidden).value = t3; 
}

ASP.NET

<asp:TextBox ID="A3" runat="server" CssClass="inputcss" CausesValidation="True" AutoCompleteType="Disabled" 
    onblur="ANFormula('<%=A3.ClientID %>', '<%=A4.ClientID %>', '<%=A5.ClientID %>', '<%=A5hidden.ClientID %>')"></asp:TextBox> 

<asp:TextBox ID="A4" runat="server" CssClass="inputcss" CausesValidation="True" AutoCompleteType="Disabled" 
    onblur="ANFormula('<%=A3.ClientID %>', '<%=A4.ClientID %>', '<%=A5.ClientID %>', '<%=A5hidden.ClientID %>"></asp:TextBox> 

<asp:TextBox ID="A5" runat="server" CssClass="inputcss" Enabled="False" AutoCompleteType="Disabled" ></asp:TextBox>

出典

2017-10-05 14:28:59 Igor

返事をありがとう、私は仕事をするコードを取得することはできません。私はさらに、3つのラベルと3つのテキストボックスを持つ単純なWebページをjavascriptで作成し、それを動作させることができます。 –

javascriptの計算asp.netのテキストボックス

答えて

関連する問題