使用Javascript在asp.net頁面中添加兩個數字

給定兩個文本框。（TextBox1 & TextBox2），我想添加兩個數字（使用兩個文本框），並顯示結果thrid文本框（文本框3）即時即沒有按下asp.net按鈕。這是使用Javascript完成的。我是新來的JavaScript，所以沒有太多的想法。使用Javascript在asp.net頁面中添加兩個數字

這是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>

來源

2010-07-30 Waqar Ahmed

W-試試這個（這一切都根據各地的JS '的onkeyup' 事件處理程序）：

[編輯2] - 再一次改變了事件處理程序的onkeyup。你需要做的總和（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>

來源

2010-07-30 12:29:58

非常好的吉姆..它的工作....非常感謝... 只是另一個小事情 - 是否有一個「改變事件」或類似的腳本，可以應用這樣，當textbox1或textbox2中的值被修改，textbox3值會立即更新 - 無需選項卡或單擊其他位置。查看範例在這裏「http://hotel.coraltours.net/」 checkindate和night date立即影響結帳日期。 – 2010-07-30 12:48:23

Waqar - 該頁面似乎使用原型（JavaScript框架）。但是，它使用的是onkeyup事件，因此可能會在示例中對其進行更改。 – 2010-07-30 13:00:02

謝謝吉姆和塔法...現在它工作完美 - 只是我想要的方式.. 乾杯 Waqar – 2010-07-30 13:10:53

我想你可以給每個單元格的onBlur事件添加一個函數來完成它。

來源

2010-07-30 12:27:56 TMN

-1

而另一種解決方案是使用jQuery的發生功能您按鼠標移出TextBox2中的後點擊或Tab鍵向前，它應該把結果Textbox3。

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

來源

2010-07-30 12:32:33 mare

-1 - 這是一個簡單的任務，至少不需要jQuery。 OP甚至說他是Javascript的新手......讓我們向他展示如何在沒有框架的情況下先做簡單的事情。 – 2010-07-30 12:34:48

+1。而且，如果OP正在加載100行的文本框，jQuery的委託/實時方法在這裏會很有趣......儘管我非常懷疑這種情況。 – 2010-07-30 12:39:59

是的，你是對的，我太快回答這個問題.. – mare 2010-07-30 12:50:39

首先你要找到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>

來源

2010-07-30 12:37:02

我很驚訝爲什麼其他人使用onBlur事件處理程序。對於這個問題，我會建議使用onChange事件處理程序。我可能被稱爲只是一個新手，當javascript是事，我願意聽取爲什麼onBlur在這裏被優先考慮。

來源

2010-07-30 12:37:52 tafa

tafa - 或者，我同意onchange事件將立即結果，而不求助於離開文本框。 +1並更新了我的例子，並贈予你。 – 2010-07-30 12:40:30

我和onBlur一起去的原因是，用戶輸入數字時，總數並沒有不斷更新。它只是讓事情看起來不那麼「緊張」。 – 2010-07-30 12:44:27

使用Javascript在asp.net頁面中添加兩個數字

回答

相關問題