product page with checkboxes, tick to customise and add to cost

sonicsnail · May 5, 2003

Hi all,

I have been asked to create a page that should contain the specs of a PC system for sale. Below the specs should be some "optional extras" (CD burners, RAM, etc) which can be selected by the user.

The (simple??!) idea is to have a "Total cost" at the bottom of the page, and when ticks are added beside the optionals, the Total should rise.

What I know:

The host doesn't support anything serverside, so this is a job for good'ol JS. (maybe use a cgi script to email the form results?)
I'd like to use objects/arrays so the Optional Extras can be document.written dynamically and updated by the site owner.
Each array object would have (at least) two values - NAME and PRICE.
I can't find an example of this script anywhere! (Dell use this functionallity, but using page-refreshes)

What I don't know:

How to "subtract" when a tickbox is unticked (I've been thinking of using OnClick to add the value)
The search term to use to find help online!!

I'd appreciate any guidance... someone MUST have done this kind of thing before!

cheers,

Pete

mwolf00 · May 5, 2003

Here's a basic solution....

<script>
function updatePrice(){
ttlPrice = parseFloat(document.getElementById("basePrice&quot

.innerText)

allChecks = document.getElementsByTagName("input&quot

for (x=0; x<allChecks.length; x++){
if (allChecks[x].type == "checkbox&quot

{
if (allChecks[x].checked){
thisBox = allChecks[x].name
newPrice = parseFloat(document.getElementById("pr" + thisBox).innerText)
ttlPrice += newPrice
}
}
}
document.myForm.ttl.value = ttlPrice
}
</script>

<body onLoad="updatePrice()">

<form name="myForm">
Basic System $<span id="basePrice">199.99</span>
<P><input type=checkbox name="1" id="1" onClick="updatePrice()">CD Burner - $<span id="pr1">99.99</span></p>
<P><input type=checkbox name="2" id="2" onClick="updatePrice()">LCD Screen - $<span id="pr2">299.99</span></p>
<P><input type=checkbox name="3" id="3" onClick="updatePrice()">DVD ROM - $<span id="pr3">69.99</span></p>
<P><input type=checkbox name="4" id="4" onClick="updatePrice()">Cool Case - $<span id="pr4">109.99</span></p>

<P>Total Price <input name="ttl" id="ttl" readonly></p>
</form>

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rich Cook

EdwardMartinIII · May 5, 2003

Hi Pete,

I do a similar thing at

http://www.petting-zoo.org/OrderForm.html

It's all JavaScript doing the calculations.

Feel free to lift what code you need. It calculates totals, as well as shipping (a simple formula) based on quantities of items.

Seeing as how you can't put anything on the server side (that would include CGI, of course), be extra-extra scrupulous when you receive your orders. There's always the "JavaScript Programmer's Discount".

Cheers,

[monkey]

Edward

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

product page with checkboxes, tick to customise and add to cost

sonicsnail

Technical User

mwolf00

Programmer

EdwardMartinIII

Technical User

Similar threads

Part and Inventory Search

Sponsor