How to show total cost from selected drop down boxes using a mysqlquery from database using php

Question

im building a page where you can custom build your desktop which has 14 components such as motherboard, processor etc.

ive already have them showing in a drop down box which shows the product name and price

the code below is what i have executing at the moment:

<?php

$query="SELECT product_name, price FROM processor ORDER BY id ASC";
$result = mysql_query($query);
$options="";
echo "<select name='processor' value=''>
<option>Please Select A Processor</option>";
while($nt=mysql_fetch_array($result))
{
echo "<option value='".$nt['price']."'>".$nt['product_name']." - ".$nt['price']."</option>";
}
echo "</select>";
?>

However, i also need it to show the price in a total price box once they have selected on a component from the several drop down boxes.

I am not sure how to format the above code to enable total price function into my system.

is there such a way of doing it this way or would I need to do it this way:

<select name="number" onchange="price();">
<option value="250">250</option>
<option value="500">500</option>
<option value="750">750</option>
<option value="1000">1000</option>
</select> 

Advice will be greatly appreciated. Thanks

Answer 1

The best way is to use JQuery .

Then assuming your total box has id=total

function price(){
     $('#total').val($('input[name="number"]:selected').val());
}

This basically sets the value of the total item to the value selected in the "number" selector.

Because your total is probably the sum of multiple selectors your probably need something like

function price(){
     var total = 0 ;
     total += $('input[name="item_1"]:selected').val();
     total += $('input[name="item_2"]:selected').val();
     $('#total').val(total);

}

If you got many selectors you could put them in a javascript array and loop through the array to compute the total or us the .each() function from JQuery