javascript to add up items in a booking form

[kapow]

If I have 50 items in a form, each with a price, is it possible to have a javascript that adds up the price of items a visitor clicks and displays the total in a text box?

Can anyone show me the code that does this?

[DrDoc]

You should have hidden fields that contain the prices (=easier). Add onclick onchange onblur handlers (whatever suits your needs) to each value field. Then, point those handlers to a script that will do something like this:

function myFunc() { var myPrice;
myPrice = myPrice + (document.getElementById('FirstItem').value * document.getElementById('FirstItemPrice').value);
myPrice = myPrice + (document.getElementById('SecondItem').value * document.getElementById('SecondItemPrice').value);
myPrice = myPrice + (document.getElementById('ThirdItem').value * document.getElementById('ThirdItemPrice').value);
.
.
.
myPrice = myPrice + (document.getElementById('FiftiethItem').value * document.getElementById('FiftiethItemPrice').value);

document.getElementById('TotalPrice').value = myPrice;
}

[ritch_b]

I've stickymailed some javascript that might be of use - feel free to laugh at/discard/amend it as you see fit.:)

R.

[kapow]

Wow - thankyou!
I'll give it a go. It may be a few days before I get to try it.

[kapow]

WOW! - that form is excellent.
I even figured out how to get the form to also add up the shipping cost. But I've run into another problem. I don't know how to make it possible to select a QUANTITY for an item on the form e.g. if a customer wants 20 widgets instead of 1.

Below is a javascript for a dropdown quantity selection box. I thought I would use this to reduce the amount of code on my page (I may have 50 products to choose from).

<script type="text/javascript">
<!--
document.write('<select name="Quantity1"><option selected>Qty</option>');
for (count=1; count<100; count++) {
document.write('<option value="',count,'">',count,'</option>');
}
document.write('</select>');
// -->
</script>

Can anyone tell me how to integrate the above (or any better method of selecting quantity) with the price and shipping form - working code for it below: (it adds up item cost + shipping cost + vat(tax))

<form onSubmit="return CheckForm()">
<script language="Javascript">
// checks the user has actually selected something
function CheckForm()
{
with(document.forms[0])
{
var Tot=parseFloat(Total.value);
if( isNaN(Tot) ¦¦ Tot<=0.0)
{
alert("You cannot order nothing.");
return false;
}
}
return true;
}
</script>
<table width="400" align="center">
<tr>
<td><b>ITEM</b></td>
<td><b>Shipping</b></td>
<td><b>Qty</b></td>
<td><b>Total</b></td>
<td><b>Shipping</b></td>
</tr>
<tr>
<td>Widget 1 - &pound;250</td>
<td>&pound;2.50</td>
<!--note unique name of item for validating later - this one is "Qty1" -->
<td>
<input type="CHECKBOX" name="Qty1" value="1" onClick="Totalise()">
</td>
<td>
<input type="TEXT" name="Total1" value="0.00" size=8 readonly>
</td>
<td>
<input type="TEXT" name="Ship1" value="0.00" size=8 readonly>
</td>
</tr>
<tr>
<td>Widget 2 - &pound;100</td>
<td>&pound;1.25</td>
<!--another unique item here-->
<td>
<input type="CHECKBOX" name="Qty2" value="1" onClick="Totalise()">
</td>
<td>
<input type="TEXT" name="Total2" value="0.00" size=8 readonly>
</td>
<td>
<input type="TEXT" name="Ship2" value="0.00" size=8 readonly>
</td>
</tr>
<tr>
<td>Widget 3 - &pound;50</td>
<td>&pound;0.50</td>
<!--and again-->
<td>
<input type="CHECKBOX" name="Qty3" value="1" onClick="Totalise()">
</td>
<td>
<input type="TEXT" name="Total3" value="0.00" size=8 readonly>
</td>
<td>
<input type="TEXT" name="Ship3" value="0.00" size=8 readonly>
</td>
</tr>
<tr>
<td colspan=3>Total Ex VAT</td>
<td>
<input type="TEXT" name="TotalExVat" value="0.00" size=8 readonly>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan=3> VAT @ 17.5 %</td>
<td>
<input type="TEXT" name="Vat" value="0.00" size=8 readonly>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan=3><b>TOTAL</b></td>
<td>
<input type="TEXT" name="Total" value="0.00" size=8 readonly>
</td>
<td>&nbsp;</td>
</tr>
<script language="Javascript">
function Format(expr,decplaces)
{
var str=""+Math.round(eval(expr)*Math.pow(10,decplaces));
while(str.length<=decplaces)
{
str="0"+str;
}
var decpoint=str.length-decplaces;
return str.substring(0,decpoint) + "." + str.substring(decpoint,str.length);
}
function Totalise()
{
with(document.forms[0])
{
// define price and format for item 1 when checked - and shipping
if(Qty1.checked) {
Total1.value=Format(250.00,2);
Ship1.value=Format(2.50,2); }
// define price and format for item 1 when unchecked - that'll be free then
else {
Total1.value=Format(0.0,2);
Ship1.value=Format(0.0,2); }
// defines item 2 price and shipping

if(Qty2.checked) {
Total2.value=Format(100.00,2);
Ship2.value=Format(1.25,2); }
else {
Total2.value=Format(0.0,2);
Ship2.value=Format(0.0,2); }

// defines item 3 price and shipping
if(Qty3.checked) {
Total3.value=Format(50.00,2);
Ship3.value=Format(0.50,2); }
else {
Total3.value=Format(0.0,2);
Ship3.value=Format(0.0,2); }

// adds totals, does the VAT stuff and that's it
var
Sum=parseFloat(Total1.value)+parseFloat(Ship1.value)+parseFloat(Total2.value)+parseFloat(Ship2.value)+parseFloat(Total3.value)+parseFloat(Ship3.value);

TotalExVat.value=Format(Sum,2);
Vat.value=Format(Sum*(17.5/100.0),2);
Total.value=Format(Sum+Sum*(17.5/100.0),2);
}
}
Totalise();
</script>
</table>
<p>&nbsp;</p>
<p>
<input type="submit" name="Submit" value="Submit">
</p>
</form>