Adding numbers in real time?

angst · 12-16-2005, 05:44 PM

Hi,
I'm wondering how I can add numbers in real time using javascript.

example,

say I enter a number in a text field,

<input type="text" name="qty" value="2">
<input type="text" name="cost" value="5">

how would I then be able to get the total in another test field, like:

<input type="text" name="total" value="10">

hope someone understands what I'm trying to do here.
any help would be great!

thanks in advance for your time!
-ken

jalarie · 12-16-2005, 05:59 PM

angst · 12-16-2005, 06:15 PM

hmm, that doesn't seem to do anything,
unless I'm missing something?

thanks again,
-Ken

jalarie · 12-16-2005, 06:24 PM

These three lines need to be within <form> </form> tags. I tested it on a WinXP machine running Firefox.

vwphillips · 12-16-2005, 06:32 PM

very prone to typing errors

this makes some attempt to catch

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
<!--

function Add(){
 var q=document.forms[0].qty;
 var c=document.forms[0].cost;
 var t=document.forms[0].total;
 if (isNaN(q.value)||isNaN(c.value)){
  q.value=q.value.replace(/\D/g,'');
  c.value=c.value.replace(/\D/g,'');
  alert('Only Numbers Allowed');
 }
 if (q.value.length>0&&c.value.length>0){
  t.value=parseInt(q.value)+parseInt(c.value);
 }
}
//-->
</script>

</head>

<body>
<form >
<input type="text" name="qty" value="2" onkeyup="Add();" >
<input type="text" name="cost" value="5" onkeyup="Add();" >
<input type="text" name="total" value="10">
</form>
</body>

</html>

angst · 12-16-2005, 06:36 PM

ah
perfect!

thanks again for you help!
-Ken

Ancora · 12-16-2005, 06:47 PM

Ignored, so deleted.

angst · 12-16-2005, 06:47 PM

ok one more question,
what if I had a drop down <select> to add another number option in?

like

PHP Code:


			
<script language="JavaScript" type="text/javascript">

<!--



function Add(){

 var q=document.forms[0].tax;

 var q=document.forms[0].qty;

 var c=document.forms[0].cost;

 var t=document.forms[0].total;

 if (isNaN(q.value)||isNaN(c.value)){

  q.value=q.value.replace(/D/g,'');

  c.value=c.value.replace(/D/g,'');

  alert('Only Numbers Allowed');

 }

 if (q.value.length>0&&c.value.length>0){

  t.value=parseInt(q.value)+parseInt(c.value);

 }

}

//-->

</script>



</head>



<body>

<form >

tax:

<select name="tax">

<option value="">none</option>

<option value="5.0">5%</option>

<option value="10.0">10%</option>

<option value="15.0">15%</option>

</select>

<br />

qty:

<input type="text" name="qty" value="2" onkeyup="Add();" /><br />

cost:<input type="text" name="cost" value="5" onkeyup="Add();" /><br />

Total:<input type="text" name="total" value="10">

</form>

sorry for all the questions, i'm new with javascript.

thanks again,
-Ken

angst · 12-16-2005, 06:58 PM

hmm,
tried this:

<script language="JavaScript" type="text/javascript">

</script>

but no luck, doesn't work at all now.

angst · 12-16-2005, 07:08 PM

ok,
I've got it working,
just one last question,

how can I make the total update if I select the tax last.

my code:

PHP Code:


			
<script language="JavaScript" type="text/javascript">

<!--



function Add(){

 var tx=document.forms[0].tax;

 var q=document.forms[0].qty;

 var c=document.forms[0].cost;

 var t=document.forms[0].total;

 if (isNaN(q.value)||isNaN(c.value)){

  q.value=q.value.replace(/D/g,'');

  c.value=c.value.replace(/D/g,'');

  tx.value=tx.value.replace(/D/g,'');

  alert('Only Numbers Allowed');

 }

 if (q.value.length>0&&c.value.length>0){

  temp=parseInt(q.value) * parseInt(c.value);

  t.value = temp * tx.value / 100 + temp;

 }

}

//-->

</script>



</head>



<body>

<form >

<select name="tax" onkeyup="Add();">

<option value="0">non</option>

<option value="5">5</option>

<option value="10">10</option>

<option value="15">15</option>

</select>

<br />

qty:<input type="text" name="qty" value="" onkeyup="Add();" /><br />

cost:<input type="text" name="cost" value="" onkeyup="Add();" /><br />

total:<input type="text" name="total" value="">

</form>

I tried adding onkeyup="Add();" to the select, but it doesn't seem to work.

any ideas?

thanks again!
-Ken

angst · 12-16-2005, 07:17 PM

ok, I got it,
using
onChange="Add();"

-Ken