ansaurus

Question

Add two numbers in asp.net page using Javascript

Answer 1

+1 A:

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

TMN 2010-07-30 12:27:56

Answer 2

A:

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"&gt;
<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>

cheers jim

jim 2010-07-30 12:29:58

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 "http://hotel.coraltours.net/"The checkindate and nights date effect the checkout date instantly.

Waqar Ahmed 2010-07-30 12:48:23

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.

jim 2010-07-30 13:00:02

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

Waqar Ahmed 2010-07-30 13:10:53

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

jim 2010-07-30 13:18:38

Answer 3

A:

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

mare 2010-07-30 12:32:33

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

Justin Niessner 2010-07-30 12:34:48

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

David Murdoch 2010-07-30 12:39:59

yeah you're both right, I was too quick answering the question..

mare 2010-07-30 12:50:39

Answer 4

+3 A:

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>

Pavel Morshenyuk 2010-07-30 12:37:02

Answer 5

A:

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.

tafa 2010-07-30 12:37:52

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.

jim 2010-07-30 12:40:30

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

Justin Niessner 2010-07-30 12:44:27

ansaurus

tags:

views:

answers:

Add two numbers in asp.net page using Javascript

related questions