ASP.NET - Adding two textbox values and showing in third textbox on clientside

Asked By Esmail on 19-Aug-10 04:59 AM
How to add two textbox values that will be showed in third textbox on client side itself on ASP.NET.
I have use this javascript
function Calculate()   
{    
var Quantity = document.getElementById("TextBox1").value;    
var Rate = document.getElementById("TextBox2").value;
if(Quantity=="")
{     
Quantity=0;    
}   
if (Rate=="")    
{     
Rate=0;    
}    
document.getElementById("TextBox3").value = (Quantity + Rate);   
} 

and used in textboxes as:

      <asp:TextBox ID="TextBox1" onblur="Calculate();" runat="server"></asp:TextBox>
      <asp:TextBox ID="TextBox2" onblur="Calculate();" runat="server"></asp:TextBox>
Anoop S replied to Esmail on 19-Aug-10 05:05 AM
use this code

<script language="javascript">
function AppendValues(form)
{
   var TextBox1 = form.textbox1.value;
   var TextBox2 = form.textbox2.value;
   form.textbox3.value = Textbox1 + TextBox2;
}
</script>
 
<INPUT type = text name="textbox1" onChange="AppendValues(this.form);">
<INPUT type = text name="textbox2" onChange="AppendValues(this.form);">
<INPUT type = text name="textbox3" READONLY>
Ken Fitzpatrick replied to Esmail on 19-Aug-10 05:16 AM
Esmail,

Try this:
<body>
  <form id="form1" runat="server">
  <div>
    <script type="text/JavaScript">
      function Calculate()  
      {   
        var q = parseInt(document.getElementById("textbox1").value);
        var r = parseInt(document.getElementById("textbox2").value);
        document.getElementById("textbox3").value = q + r;  
      }  
    </script>
    <asp:TextBox ID="textbox1" OnChange="Calculate()" runat="server"></asp:TextBox>
    <asp:TextBox ID="textbox2" OnChange="Calculate()" runat="server"></asp:TextBox>
    <asp:TextBox ID="textbox3" Text="0" runat="server"></asp:TextBox>
  </div>
  </form>
</body>

Javascript is case sensitive, so make sure the IDs in the getelementById call are in the proper code.

Hope this helps,

Ken
Sagar P replied to Esmail on 19-Aug-10 05:45 AM
Modify your code like this;

function Calculate()   
{  
var Quantity = document.getElementById("TextBox1").value;  
var Rate = document.getElementById("TextBox2").value;
if(Quantity=="")
{    
  Quantity=0;  
}   
if (Rate=="")  
{    
  Rate=0;  
}  
document.getElementById("TextBox3").value = (parseInt(Quantity) + parseInt(Rate));   
} 
Esmail replied to Ken Fitzpatrick on 19-Aug-10 05:46 AM
But when i take large numbers with decimal places it does not show decimal total.
For example when i enter this values: 8989965.98   and    89.56
I get this answer

8990054

But actual answer is

8990055.54
Anand Malli replied to Esmail on 19-Aug-10 05:55 AM
Hi Esmail,

use following code,its on keyup so that you will get the out put as soon as you type something,you will get the output in third textbox

function Calculate()
{
  var txt1 = document.getElementById('<%= TextBox1.ClientID%>').value;
  var txt2 = document.getElementById('<%= TextBox2.ClientID%>').value;
  if (txt1 != '' && txt2 != "")
  document.getElementById('<%= TextBox3.ClientID%>').value = eval((parseInt(txt1) + parseInt(txt2)));
}

and the mark up is below

<asp:TextBox ID="TextBox1" onkeyup="Calculate();" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" onkeyup="Calculate();" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

thats it you are done

let me know
thxs
Esmail replied to Anand Malli on 19-Aug-10 06:07 AM
it only takes integer values i.e when i enter 1.22 and 2.22 it shows 3
but the value should be 3.44
How to get decimal values
Ken Fitzpatrick replied to Esmail on 19-Aug-10 06:09 AM
Sorry about that, I wasn't thinking about decimals. Change the parseInt to a parseFloat. That should do the trick,

Ken
Anand Malli replied to Esmail on 19-Aug-10 06:24 AM
hey sorry for that

replace parseInt with parseFloat,and it will work like you want

let me know
thxs
Esmail replied to Anand Malli on 19-Aug-10 06:35 AM
code is running fine but when i add 8989965.58 and 89.58 it gives 8990055.16000001 but it should stop at .16
Anand Malli replied to Esmail on 19-Aug-10 06:49 AM
hi

change your code with following lines,you will need to use MAth.pow for that like following

var originalValue = eval((parseFloat(txt1) + parseFloat(txt2)));
var roundValue = Math.round(originalValue * Math.pow(10, 2)) / Math.pow(10, 2);
document.getElementById('<%= TextBox3.ClientID%>').value = roundValue;

let me know
thxs
Esmail replied to Anand Malli on 19-Aug-10 07:01 AM
thank you
Anand Malli replied to Esmail on 19-Aug-10 07:02 AM
welcome...
Goniey N replied to Esmail on 19-Aug-10 08:57 AM
Use Below Code :


<script language='text/javascript'>
  function Addition()
  {
    if ( (document.getElementById('<%= TextBox1.ClientID%>').value != " ") && (document.getElementById('<%= TextBox2.ClientID%>').value != " ") )
    {
      document.getElementById('<%= TextBox3.ClientID%>').value = parseFloat(document.getElementById('<%= TextBox1.ClientID%>').value)  + parseFloat(document.getElementById('<%= TextBox2.ClientID%>').value);
  //It Will Give You Result As You Wish.....
      }
         else
         {
      alert ("Please Enter Any Values.")
         }
  }
</script>
 
<asp:TextBox ID="TextBox1" onkeyup="Calculate();" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" onkeyup="Calculate();" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>




It Will Work 100%...

Hope This Helps You......
rohit replied to Esmail on 05-Mar-11 10:54 PM
how to display result in bound column instead of textbox in grid.