Add two numbers in asp.net page using Javascript

Question

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.net button. This is to be done using Javascript. I'm new to javascript so dont have much idea.

This is the asp.net 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.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>

Pavel Morshenyuk · Accepted Answer · 2010-07-30 12:47:52Z

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>

edited Jul 30, 2010 at 12:47

answered Jul 30, 2010 at 12:37

Pavel Morshenyuk

11.5k4 gold badges34 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jim tollan · Accepted Answer · 2011-09-29 13:11:48Z

1

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

edited Sep 29, 2011 at 13:11

user142162

answered Jul 30, 2010 at 12:29

jim tollan

22.5k4 gold badges53 silver badges64 bronze badges

4 Comments

Waqar Ahmed Over a year ago

Excellent Jim..It works.... Thank you very much... just another small thing - is there a "change event" or similar script which can be applied so when a value in textbox1 or textbox2 is modified, the textbox3 value is updated instantly - without tabbing or clicking else where. check example here "hotel.coraltours.net" The checkindate and nights date effect the checkout date instantly.

jim tollan Over a year ago

Waqar - that page appears to be using prototype (a javascript framework). however, it's using the onkeyup event, so that may work of you change it in the example.

Waqar Ahmed Over a year ago

Thanks Jim and Tafa... Now It works Perfect - Just the way I wanted it.. Cheers Waqar

jim tollan Over a year ago

Glad to have pointed you in the right direction. remember also to mark the correct answer for future searches on the topic. :-)

TMN · Accepted Answer · 2010-07-30 12:27:56Z

1

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

answered Jul 30, 2010 at 12:27

TMN

3,05022 silver badges23 bronze badges

Comments

tafa · Accepted Answer · 2010-07-30 12:37:52Z

0

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.

answered Jul 30, 2010 at 12:37

tafa

7,3443 gold badges39 silver badges40 bronze badges

2 Comments

jim tollan Over a year ago

tafa - either or, tho i'd agree that the onchange event will give instant results without recourse to leaving the textbox. +1 and have updated my example with credit given to you.

Justin Niessner Over a year ago

The reason I went with onBlur is so the sum wasn't constantly updating while the user was entering the number. It simply makes things seem a little less "jittery".

mare · Accepted Answer · 2010-07-30 12:32:33Z

-1

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);
        });

answered Jul 30, 2010 at 12:32

mare

13.1k24 gold badges107 silver badges193 bronze badges

2 Comments

Justin Niessner Over a year ago

-1 - This is a simple task that doesn't require jQuery in the least. The OP even states he's new to Javascript...let's show him how to do the simple things without a framework first.

David Murdoch Over a year ago

+1 to the comment. but also, if the OP is loading 100s of rows of textboxes jQuery's delegate/live methods would be something of interest here...though I highly doubt that is the case.

Collectives™ on Stack Overflow

Add two numbers in asp.net page using Javascript

5 Answers 5

Comments

4 Comments

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related