admin管理员组

文章数量:1316515

Given Two text Boxes. (TextBox1 & TextBox2), I want add two numbers (using the two text boxes) and show the result in the thrid textbox (TextBox3) instantly i.e without pressing a asp button. This is to be done using Javascript. I'm new to javascript so dont have much idea.

This is the asp page.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">

<html xmlns="">
<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>

Given Two text Boxes. (TextBox1 & TextBox2), I want add two numbers (using the two text boxes) and show the result in the thrid textbox (TextBox3) instantly i.e without pressing a asp button. This is to be done using Javascript. I'm new to javascript so dont have much idea.

This is the asp page.

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

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

<html xmlns="http://www.w3/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>
Share Improve this question edited Jul 30, 2010 at 12:27 David Hedlund 130k33 gold badges204 silver badges223 bronze badges asked Jul 30, 2010 at 12:25 Waqar AhmedWaqar Ahmed 2931 gold badge5 silver badges16 bronze badges
Add a ment  | 

5 Answers 5

Reset to default 3

First you have to find your textboxes in DOM, then assign event handlers to these elements, and finally you need to write function that will add your numbers. Here is little example:

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

W- try this (it's all based around the js 'onkeyup' event handler):

[edit 2] - changed event handler yet again to onkeyup. you'd need to do a little check in the sum(0 function that the textbox value was a number (isNan).

<html xmlns="http://www.w3/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>

I imagine you can attach a function to each cell's onBlur event to do it.

I am surprised why others use the onBlur event handler. For this problem, I would suggest using the onChange event handler. I may be called just a newbie when javascript is the matter, I am willing to listen why onBlur is preffered here.

And another solution using jQuery function that occurs after you move out of Textbox2 either by mouse clicking or by tabbing forward and it should put the result in Textbox3.

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

本文标签: Add two numbers in aspnet page using JavascriptStack Overflow