Okay this will work for any amount of dropdown menus, and you can basically just plug it right in. It displays the price of the selected item and keeps a running total at the bottom.
Requirements:
* Make sure the <select> menus are in a <form> tag.
* When you build the menus, set the value of the <option> tags to the price, without the dollar sign, something like:
PHP Code:
<option value="<?php echo $row_motherboard['price']?>">
* Put this inside the <head> of the page:
Code:
<script language="javascript">
function calculate()
{
var total = 0;
var displayTotal = document.forms[0].elements[document.forms[0].elements.length-1];
for(i=0;i<document.forms[0].elements.length-2;i++)
{
if((document.forms[0].elements[i].type == "select-one"))
{
if(document.forms[0].elements[i].value != "select one")
{
document.forms[0].elements[i+1].value = document.forms[0].elements[i].value;
total += parseFloat(document.forms[0].elements[i].value);
}
else
{
document.forms[0].elements[i+1].value = "";
}
}
}
displayTotal.value = Math.round(total*100)/100;
}
</script>
* Add onChange="calculate();" to your <select> menus like this:
HTML Code:
<body>
<form>
<p>
Motherboard........:<br />
<select onChange="calculate();">
<option value="select one">Select one</option>
<option value="99.95">ACME basic</option>
<option value="149.95">ACME plus</option>
<option value="249.95">Intel 435</option>
</select> <input type="text" /><br /><br />
CPU................:<br />
<select onChange="calculate();">
<option value="select one">Select one</option>
<option value="44.95">CPU basic</option>
<option value="79.95">CPU plus</option>
<option value="129.95">Intel CPU</option>
</select> <input type="text" /><br /><br />
Memory.............:<br />
<select onChange="calculate();">
<option value="select one">Select one</option>
<option value="199.95">10 Gig</option>
<option value="249.95">20 Gig</option>
<option value="349.95">40 Gig</option>
</select> <input type="text" /><br /><br />
Total..............:<br />
<input type="text" />
</form>
</body>
* Set the value of the first <option> in each menu to "select one". (
Edit: This should be easy because it looks like you're hand-coding the actual <select> box, it's only the options that are dynamic... So now, you just hand-code the first <option> as well.)
That's about it... the code is generic so you can name your form elements whatever you want, or not name them at all, and it will work the same.
The order of the elements is important, though, you want to have a dropdown, then its price box, dropdown-price, dropdown-price, like that until the end, and then just throw in an extra text box for the total.
heh
--- just one thing: In my database, I have a table called 'products'. In that table I have many FIELDS, including: ' idCategory' and 'idSubCategory'. SO- on the quote page, I have a drop down for floppy drives (fdd) and one for hard drives (hdd). The floppy drives are a subcategory of hard drives. See here:
