使用Javascript在asp.net页面中添加两个数字答案

【问题标题】：Add two numbers in asp.net page using Javascript使用Javascript在asp.net页面中添加两个数字
【发布时间】：2010-07-30 12:25:34
【问题描述】：

给定两个文本框。（TextBox1 和 TextBox2），我想添加两个数字（使用两个文本框）并在第三个文本框 (TextBox3) 立即中显示结果，即不按 asp.net 按钮。这将使用 Javascript 来完成。我是 javascript 新手，所以不太了解。

这是 asp.net 页面。

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        Box1
        <br />
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <br />
        <br />
        Box2<br />
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <br />
        <br />
        Box3<br />
        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

    </div>
    </form>
</body>
</html>

【问题讨论】：

标签： javascript asp.net

【解决方案1】：

首先您必须在 DOM 中找到您的文本框，然后为这些元素分配事件处理程序，最后您需要编写将添加数字的函数。这是一个小例子：

<script language="JavaScript" type="text/javascript">
 // finding elements. you have to use ASP.NET ClientID property due to ASP generates its own ids.
 var tb1 = document.getElementById('<%= TextBox1.ClientID %>');
 var tb2 = document.getElementById('<%= TextBox2.ClientID %>');
 var tb3 = document.getElementById('<%= TextBox3.ClientID %>');
 // assigning event handlers
tb1.onchange=calcNumbers;
tb2.onchange=calcNumbers;
 // sum function
function calcNumbers() {    
tb3.value = parseInt(tb1.value) + parseInt(tb2.value);
}
</script>

【讨论】：

【解决方案2】：

W- 试试这个（这一切都基于 js 'onkeyup' 事件处理程序）：

[edit 2] - 再次将事件处理程序更改为 onkeyup。您需要在 sum(0 函数中检查一下文本框的值是否为数字 (isNan)。

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
</head>
<body>
    First Number :<input id="txtFirstNumber" type="text" onkeyup="sum();" /><br />
    Second Number:<input id="txtSecondNumber" type="text" onkeyup="sum();" /><br />
    Third Number:<input id="txtThirdNumber" type="text" /><br />
    <input id="changeWatcher" type="text" />
</body>

<script type="text/javascript">

    function sum() {
        var txtFirstNumberValue = document.getElementById('txtFirstNumber').value;
        var txtSecondNumberValue = document.getElementById('txtSecondNumber').value;
        var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
        if(!isNaN(result))
        {
            document.getElementById('txtThirdNumber').value = result;
            //alert(parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue));
        document.getElementById('changeWatcher').value = new Date();
        }
    }

</script>

</html>

【讨论】：

优秀的吉姆..它工作....非常感谢...只是另一件小事 - 是否有“更改事件”或类似的脚本可以应用，所以当 textbox1 中的值或 textbox2 被修改，textbox3 值会立即更新 - 无需使用制表符或单击其他位置。在此处查看示例“hotel.coraltours.net” checkindate 和 nights 日期立即影响结帐日期。
Waqar - 该页面似乎正在使用原型（一个 javascript 框架）。但是，它正在使用 onkeyup 事件，因此您可以在示例中更改它。
感谢 Jim 和 Tafa...现在它完美运行 - 正是我想要的方式.. 干杯 Waqar
很高兴为您指明了正确的方向。还记得标记正确的答案以供将来搜索该主题。 :-)

【解决方案3】：

我想你可以在每个单元格的onBlur 事件上附加一个函数来做到这一点。

【讨论】：

【解决方案4】：

我很惊讶为什么其他人使用 onBlur 事件处理程序。对于这个问题，我建议使用 onChange 事件处理程序。当javascript是问题时，我可能被称为新手，我愿意听听为什么这里首选onBlur。

【讨论】：

tafa - 或者，尽管我同意 onchange 事件将给出即时结果而无需离开文本框。 +1 并更新了我的示例，并感谢您。
我选择 onBlur 的原因是，当用户输入数字时，总和不会不断更新。它只是让事情看起来不那么“紧张”。

【解决方案5】：

另一个使用 jQuery 函数的解决方案是在您通过鼠标单击或向前跳出 Textbox2 后出现的，它应该将结果放入 Textbox3。

$('#Textbox2').blur(
    function () {
        var t1value = $('#Textbox1').val();
    var t2value = &('#Textbox2').val();
    var sum = t1value + t2value;    
    $('#Textbox3').val(sum);
        });

【讨论】：

-1 - 这是一个简单的任务，至少不需要 jQuery。 OP 甚至说他是 Javascript 新手……让我们先向他展示如何在没有框架的情况下做一些简单的事情。
+1 评论。而且，如果 OP 正在加载 100 行文本框，那么 jQuery 的委托/实时方法在这里会很有趣……尽管我非常怀疑情况是否如此。