堆棧內存溢出
  簡體   English   中英

javascript計算asp.net文本框

[英]javascript calculation asp.net textboxes

 原文  2017-10-05 13:39:17  4   3    javascript/ asp.net

問題描述

我在用戶向其中輸入數字的多視圖控件的幾個視圖中都有一系列文本框。 當用戶在文本框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>

3 個解決方案

解決方案1
 0  2017-10-05 13:56:26

您將需要編輯文本框標記，如下所示： 

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

它將檢查傳遞的對象的ID，以便能夠控制要更改的文本框值

解決方案2
 0  2017-10-05 13:58:09

首先，您需要告訴parseInt您想將數字解析為十進制數字parseInt(t1, 10) 。

然后，你可以使用data-屬性組這些控件，例如data-add-operation來標識操作數和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);
}

解決方案3
 0  2017-10-05 14:28:59

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用JavaScript和ASP.NET無法對我的ASP文本框進行驗證 有關Javascript和文本框輸入的ASP.net幫助 JavaScript在asp.net的文本框中添加2個數字，不起作用 如何使用JavaScript在ASP.NET Web表單上動態添加文本框 在 ASP.Net 中使用 JavaScript 將“啟用的文本框”中的值相乘 在ASP.NET中在TextBoxes周圍加載內容 ASP.NET中TextBox的自動完成搜索組件 一個 asp.net 驗證器，用於多個文本框 javascript禁用某些文本框后無法提交asp.net頁面 如何在JavaScript中使用具有相同ID的兩個文本框獲取asp.net用戶控件的值
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM