...

View Full Version : 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
<input type="text" name="qty" value="2">
<input type="text" name="cost" value="5" onblur="document.forms[0].total.value = document.forms[0].qty.value*1 + document.forms[0].cost.value*1;">
<input type="text" name="total" value="10">

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


<!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!:cool:

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


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

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,'');
alert('Only Numbers Allowed');
}
if (q.value.length>0&&c.value.length>0){
temp.value=parseInt(q.value)+parseInt(c.value);
t.value=temp.value * parseInt(tx.value) / 100 + temp.value;
}
}
//-->
</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:



<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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum