使用Javascript在ASP.NET頁面中添加兩個數字

Question

給定兩個文本框。 （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>

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

Answer 2

我想您可以將一個函數附加到每個單元格的onBlur事件onBlur執行此操作。

Answer 3

請嘗試一下（這全部基於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>

Answer 4

我很驚訝為什么其他人使用onBlur事件處理程序。 對於此問題，我建議使用onChange事件處理程序。 當使用javascript時，我可能只是個新手，我願意聽聽為什么在這里使用onBlur。

Answer 5

還有另一種使用jQuery函數的解決方案，該解決方案是在您通過鼠標單擊或向前移出Textbox2之后出現的，它將結果放入Textbox3中。

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

使用Javascript在ASP.NET頁面中添加兩個數字

問題描述

5 個解決方案

解決方案1
3 2010-07-30 12:37:02

解決方案2
1 2010-07-30 12:27:56

解決方案3
1 已采納 2010-07-30 12:29:58

解決方案4
0 2010-07-30 12:37:52

解決方案5
-1 2010-07-30 12:32:33

使用Javascript在ASP.NET頁面中添加兩個數字

問題描述

5 個解決方案

解決方案1 3 2010-07-30 12:37:02

解決方案2 1 2010-07-30 12:27:56

解決方案3 1 已采納 2010-07-30 12:29:58

解決方案4 0 2010-07-30 12:37:52

解決方案5 -1 2010-07-30 12:32:33

解決方案1
3 2010-07-30 12:37:02

解決方案2
1 2010-07-30 12:27:56

解決方案3
1 已采納 2010-07-30 12:29:58

解決方案4
0 2010-07-30 12:37:52

解決方案5
-1 2010-07-30 12:32:33