Question

我试图从两个文本框中获取值，减去值并在键入值时在标签中返回差值。我尝试了以下代码，但没有运气。做这个的最好方式是什么？这在带有母版页的asp.net页上运行。

.ASPX

  <asp:TextBox ID="txtWeek1FridayAM_IN" runat="server" class="numeric" Width="40px" >0.00</asp:TextBox>
  <asp:Label ID="lblWeek1FridayTotalHrs" runat="server" class="numeric" Text="0"></asp:Label>                  
  <asp:TextBox runat="server" ID="txtWeek1FridayAM_OUT" class="numeric" width="40px"  OnTextChanged="OUTvalidation" >0.00</asp:TextBox>

aspx.cs

     $(document).ready(function () {
        sum();
        $("#txtWeek1FridayAM_IN, #txtWeek1FridayAM_OUT").on("keydown keyup", function () {
            sum();
        });
    });

    function sum() {
        var num1 = document.getElementById('#txtWeek1FridayAM_IN').value;
        var num2 = document.getElementById('#txtWeek1FridayAM_OUT').value;
        var result = parseFloat(num2) - parseFloat(num1);

        if (!isNaN(result)) {
            document.getElementById('#lblWeek1FridayTotalHrs').value = result;

        }

    }

Answer 1

几点：

如果需要在客户端脚本中引用控件ID，则可以使用<%= control_id.ClientID %>。
label或span元素不具有value属性，请使用textContent。
我更喜欢input而不是keyup和keydown。
我在运行代码时遇到OnTextChanged="OUTvalidation"的问题。但能够通过将其从控件中删除而成功执行。

将您的代码更改为以下内容：

$(document).ready(function () {
    sum();
    $("body").on("input", "#<%=txtWeek1FridayAM_IN.ClientID%>, #<%=txtWeek1FridayAM_OUT.ClientID%>", function () {
       sum();
    });
});

function sum() {
    var num1 = document.getElementById('<%=txtWeek1FridayAM_IN.ClientID%>').value;
    var num2 = document.getElementById('<%=txtWeek1FridayAM_OUT.ClientID%>').value;
    var result = parseFloat(num2) - parseFloat(num1);

    if (!isNaN(result)) {
        document.getElementById('<%=lblWeek1FridayTotalHrs.ClientID%>').textContent = result;
    }
}

Answer 2

您可以将onkeyup放在文本框控件中

 <asp:TextBox runat="server" ID="txtWeek1FridayAM_OUT" class="numeric" width="40px"  OnTextChanged="OUTvalidation" onkeyup="sum(); return false" >0.00</asp:TextBox>

Answer 3

您是否曾用onkeypress="SUM()"尝试过此操作：

ASP：

<asp:TextBox ID="txtWeek1FridayAM_IN" onkeypress="SUM()" runat="server" class="numeric" Width="40px" >0.00</asp:TextBox>
<asp:Label ID="lblWeek1FridayTotalHrs" runat="server" class="numeric" Text="0"></asp:Label>                  
<asp:TextBox runat="server" ID="txtWeek1FridayAM_OUT" onkeypress="SUM();" class="numeric" width="40px"  OnTextChanged="OUTvalidation" >0.00</asp:TextBox>

脚本：

function SUM() {
      var num1 = $('input[id=<%=txtWeek1FridayAM_IN.ClientID%>]').val();
      var num2 = $('input[id=<%=txtWeek1FridayAM_OUT.ClientID%>]').val();
      var result = parseFloat(num2) - parseFloat(num1);
      if (!isNaN(result)) {
         document.getElementById('<%=lblWeek1FridayTotalHrs.ClientID %>').value = result;
      }
}

请注意：

您可以在定义控件时指定javascript方法，而无需依赖document.ready。就像我们所做的onkeypress="SUM()"
由于您使用的是ASP控件，因此该控件的ID可能与您定义的ID不同。母版页也可能对此起作用。所以最好使用ClientID

Answer 4

使用此脚本

$(document).ready(function () {
    sum();
    $('[id$="txtWeek1FridayAM_IN"], [id$="txtWeek1FridayAM_OUT"]').on("keyup", function () {
        sum();
    });
});

function sum() {
    var num1 = $('[id$="txtWeek1FridayAM_IN"]').val();
    var num2 = $('[id$="txtWeek1FridayAM_OUT"]').val();
    var result = parseFloat(num2) - parseFloat(num1);

    if (!isNaN(result)) {
        $('[id$="lblWeek1FridayTotalHrs"]').html(result);

    }

}

Answer 5

尝试一下，这将起作用 .aspx页面

<asp:TextBox ID="txtWeek1FridayAM_IN" runat="server" class="numeric" Width="40px" >0.00</asp:TextBox>
<asp:Label ID="lblWeek1FridayTotalHrs" runat="server" class="numeric" Text="0"></asp:Label>                  
<asp:TextBox runat="server" ID="txtWeek1FridayAM_OUT" class="numeric" width="40px"  OnTextChanged="OUTvalidation" >0.00</asp:TextBox>

.cs页面

protected void OUTvalidation(object sender, EventArgs e)
{
    int val1 = Convert.ToInt32(txtWeek1FridayAM_IN.Text);
    int val2 = Convert.ToInt32(txtWeek1FridayAM_OUT.Text);
    int val3 = val1 - val2;
    lblWeek1FridayTotalHrs.Text = val3.ToString();
}

如果您在两个文本框中都输入了值，然后在第二个文本框中单击Enter，它将在标签上显示值。

如何减去asp文本框值并将结果放入asp标签

5 个答案: