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>
5 Answers
Reset to default 3First 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);
});