使用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页面中添加两个数字

回答

相关问题