Here is one example. -for quickly pricing up systems.
this is OK for a quick shop, assuming all the prices have different values, when they press buy it'll be the prices that are passed to the next page.
a better example would involve some lookup tables in the script for the prices, that way the component names will get passed to the next script.
I'll have a little work at one of those now.
Code:
<html>
<head>
<script type="text/javascript">
function update()
{
var total, mainboard, processor, ram; //declare variables (1 for each component)
mainboard = document.form1.mainboard.value * 1; //get the selected values from the HTML form
processor = document.form1.processor.value * 1; //*1 to ensure string is recognised as a number not var
ram = document.form1.ram.value * 1;
total = mainboard + processor + ram * 1; //add all the values together as numbers
total = Math.round(total*100)/100; //round to make sure accuracy is 2 decimal places for currency
document.form1.price.value=total; //update the total box
}
</script>
</head>
<body onload="update()">
<form name="form1">
Chose your components
<br /><br />
<select name="mainboard" onchange="update()">
<option value="54.60">Mainboard 1</option>
<option value="32.67">Mainboard 2</option>
<option value="32.68">Mainboard 3</option>
<option value="78.90">Mainboard 4</option>
</select>
<br />
<select name="processor" onchange="update()">
<option value="50.00">Processor 1</option>
<option value="75.00">Processor 2</option>
<option value="80.00">Processor 3</option>
<option value="110.00">Processor 4</option>
</select>
<br />
<select name="ram" onchange="update()">
<option value="20.00">RAM 1</option>
<option value="20.00">RAM 2</option>
<option value="25.00">RAM 3</option>
<option value="30.00">RAM 4</option>
</select>
<br />
Total Price : <input type="text" name="price" />
<input type="submit" value="Buy!"
</form>
</body>
</html>
the example with lookup tables is as follows.
Code:
<html>
<head>
<script type="text/javascript">
function update()
{
var total, mainboard, processor, ram; //declare variables (1 for each component)
mainboard = document.form1.mainboard.value; //get the selected values from the HTML form
processor = document.form1.processor.value;
ram = document.form1.ram.value;
if (mainboard=="m1") { mainboard=32.50; }
if (mainboard=="m2") { mainboard=36.57; }
if (mainboard=="m3") { mainboard=65.00; }
if (mainboard=="m4") { mainboard=75.50; }
if (processor=="p1") { processor=34.62; }
if (processor=="p2") { processor=45.67; }
if (processor=="p3") { processor=65.67; }
if (processor=="p4") { processor=85.67; }
if (ram=="r1") { ram=54.60; }
if (ram=="r2") { ram=56.67; }
if (ram=="r3") { ram=65.67; }
if (ram=="r4") { ram=78.67; }
mainboard = mainboard * 1;
processor = processor * 1;
ram = ram *1;
total = mainboard + processor + ram; //add all the values together as numbers
total = Math.round(total*100)/100; //round to make sure accuracy is 2 decimal places for currency
document.form1.price.value=total; //update the total box
}
</script>
</head>
<body onload="update()">
<form name="form1">
Chose your components
<br /><br />
<select name="mainboard" onchange="update()">
<option value="m1">Mainboard 1</option>
<option value="m2">Mainboard 2</option>
<option value="m3">Mainboard 3</option>
<option value="m4">Mainboard 4</option>
</select>
<br />
<select name="processor" onchange="update()">
<option value="p1">Processor 1</option>
<option value="p2">Processor 2</option>
<option value="p3">Processor 3</option>
<option value="p4">Processor 4</option>
</select>
<br />
<select name="ram" onchange="update()">
<option value="r1">RAM 1</option>
<option value="r2">RAM 2</option>
<option value="r3">RAM 3</option>
<option value="r4">RAM 4</option>
</select>
<br />
Total Price : <input type="text" name="price" />
<input type="submit" value="Buy!"
</form>
</body>
</html>
Now, the user see's the price, and when they press buy you are sent a list of component choices, (m1, p4,r3 mainboard1, processor 4 and ram choice 3 for example).
I guess the only thing left to do for this script is write it in an active lanagage (php/asp etc) so that it pulls data from a database rather than having to edit to script on the webpage to update prices.
and have the choices get filtered so that you have an inteligent script that won't let you match an intel processor to a mainboard with an AMD socket of something.
edit - yes, you can add pictures to the site, it's just plain HTML with javascript.
if you wanted to get really clever you could write custom drop down menus in javascript that actually have the pictures of the components on them.
