Question

我在多视图控件中的多个视图中有一系列文本框，用户可以输入数字。当用户在文本框A3和A4中输入数字时，总和显示在文本框A5中，该文本框被禁用，因此用户无法使用javascript键入其中。在整个视图中，此功能将使用不同的文本框对进行8次。而不是我复制javascript函数8次是有一种方法，我可以重用一个函数，因为文本框ID将是唯一的区别。在uni学习javascript，到目前为止只有基础知识。

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

Answer 1

您需要编辑文本框标记，如下所示：

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

添加＆＃34;这个＆＃34;将函数作为参数传递给函数（在本例中为文本框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
}
}

它将检查传递的对象的id，以便能够控制要更改的文本框值

Answer 2

首先，您需要告诉parseInt您要将数字解析为十进制数parseInt(t1, 10)。

然后，您可以使用data-属性对这些控件进行分组，例如data-add-operation为id操作数，data-add-operation-result为id结果字段。

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

Answer 3

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

javascript计算asp.net文本框

3 个答案: