Javascript - How to add up values of field into another ?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
JPlush76
Forum Regular
Posts: 819
Joined: Thu Aug 01, 2002 5:42 pm
Location: Los Angeles, CA
Contact:

Javascript - How to add up values of field into another ?

Post by JPlush76 »

ok lets say I have a form with 3 input boxes (Small, Medium, Large) and then on the right another input box labeled "total".

A small is 1.99 a medium is 2.99 and a large is 3.99

Now you can choose how many you want of each so If I want 1 small and 2 mediums... in the total box I want that to update with the total price value = $7.97 automatically when they tab out.

What kind of javascript coding does this? I've tried looking around but I have no idea what to look around for :( thanks all!
User avatar
phpScott
DevNet Resident
Posts: 1206
Joined: Wed Oct 09, 2002 6:51 pm
Location: Keele, U.K.

part of the way

Post by phpScott »

here is some code to add numbers to another field:

Code: Select all

<html>
<head><title>some dummy counting thing</title>
</head>
<script language="javascript">
function addStuff(price, qty)
&#123;
	f=document.adding;
	total=parseFloat(f.total.value);
	newAdd=qty.value * parseFloat(price);
	total+=newAdd;
	alert("total is "+total+" newadd is "+newAdd);
	f.total.value=total;

&#125;

</script>
<body>
<form name="adding">
small <input type="text" size="3" name="smallQty" value="" onchange="addStuff(1.99, this)"><br />
medium <input type="text" size="3" name="medQty" value="" onchange="addStuff(2.99, this)"><br />
large <input type="text" size="3" name="largeQty" value="" onchange="addStuff(4.99, this)"><br />
total $<input type="text" name="total" value="0.00"><br />
</form>
</body>
</html>
there is still some more work to be done as in checking to see what is being passed is actually a number and some formationg on the total value.

Hope it is kind of useless, oops i mean usefull

phpScott
JPlush76
Forum Regular
Posts: 819
Joined: Thu Aug 01, 2002 5:42 pm
Location: Los Angeles, CA
Contact:

Post by JPlush76 »

scott you're the damn man!

it works :o

how can I change it so if I have 2 or more rows of products I can use the same function?

like

Code: Select all

Brown Sweater
Small - TEXTBOX      Medium - TEXT BOX       Large - TEXTBOX   TOTAL - TEXTBOX

Orange Shirt
Small - TEXTBOX      Medium - TEXT BOX       Large - TEXTBOX   TOTAL - TEXTBOX


GRAND TOTAL - TEXTBOX(total of all of the other total text boxes)
User avatar
phpScott
DevNet Resident
Posts: 1206
Joined: Wed Oct 09, 2002 6:51 pm
Location: Keele, U.K.

try this

Post by phpScott »

Code: Select all

<html>
<head><title>some dummy counting thing</title>
</head>
<script language="javascript">
function addStuff(price, qty, totalRow)
&#123;
	f=document.adding;
	total=parseFloat(f.total.value);

	id=document.getElementById(totalRow);
	subtotal=parseFloat(id.value);

	newAdd=qty.value * parseFloat(price);
	
	id.value=subtotal+newAdd;
	total+=newAdd;
	alert("total is "+total+" newadd is "+newAdd+" subtotal is "+subtotal);
	f.total.value=total;

&#125;

</script>
<body>
<form name="adding">
green Sweater
small <input type="text" size="3" name="smallQty" value="" onchange="addStuff(1.99, this, 'total1')"><br />
medium <input type="text" size="3" name="medQty" value="" onchange="addStuff(2.99, this, 'total1')"><br />
large <input type="text" size="3" name="largeQty" value="" onchange="addStuff(4.99, this, 'total1')"><br />
total $<input type="text" name="total1" value="0.00"><br /><br />
brown Sweater
small <input type="text" size="3" name="smallQty" value="" onchange="addStuff(1.99, this, 'total2')"><br />
medium <input type="text" size="3" name="medQty" value="" onchange="addStuff(2.99, this, 'total2')"><br />
large <input type="text" size="3" name="largeQty" value="" onchange="addStuff(4.99, this, 'total2')"><br />
total $<input type="text" name="total2" value="0.00"><br /><br />
final total
total $<input type="text" name="total" value="0.00"><br />
</form>
</body>
</html>
that should allow you to have many rows and many columns all with subtotals and a grand total.

phpScott
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post by patrikG »

Hey, JPlush76,

I bet you gave phpScott that job you offered some time ago, huh?

/pout
JPlush76
Forum Regular
Posts: 819
Joined: Thu Aug 01, 2002 5:42 pm
Location: Los Angeles, CA
Contact:

Post by JPlush76 »

I had to, he had nudie pics of me!

damn that webcam, dammit all to hell! ;)
User avatar
phpScott
DevNet Resident
Posts: 1206
Joined: Wed Oct 09, 2002 6:51 pm
Location: Keele, U.K.

what the

Post by phpScott »

what the do you think I kept those the wife was spending to much time looking at them. :oops: :D
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post by patrikG »

Does that mean I can still get the job?
Post Reply