...

View Full Version : Drop Down List and Javascript



germ1977
02-29-2012, 05:01 PM
I am working on a website that involves a pizza. I have a drop down box with the following options: small, medium, large, and extra large. When the user selects small the topping price is $0.75 each, when the user selects medium the topping price is $1.00 each, when the user selects large the topping price is $1.25 each, and when the user selects extra large the topping price is $1.25 each. I the problem is no matter what size the user selects the topping price is always $0.75.

Here is code that goes with the drop down box :


<td height="49" align="right"><label for="Pizza_Size">Size</label>
<select name="Pizza_Size" id="Pizza_Size" onchange = "SetToppingPrice()" />
<option value="Small_Pizza">Small ($4.99)</option>
<option value="Medium_Pizza">Medium ($5.99)</option>
<option value="Large_Pizza">Large ($7.99)</option>
<option value="X_Large_Pizza">X-Large ($10.99)</option>
</select></td>

Here is the Javascript code:


// JavaScript Document
function SetToppingPrice() {
var Pizza_Topping_Price = document.getElementById("Pizza_Size");
divOutput = document.getElementById("Display_Topping_Price");
if(Pizza_Topping_Price = "Small_Pizza") {
divOutput.innerHTML = "$0.75 per topping";}
else if (Pizza_Topping_Price = "Medium_Pizza") {
divOutput.innerHTML = "$1.00 per topping";}
else if (Pizza_Topping_Price = "Large_Pizza") {
divOutput.innerHTML = "$1.25 per topping";}
else if (Pizza_Topping_Price = "X_Large_Pizza") {
divOutput.innerHTML = "$1.50 per topping";}
}

Any advice is greatly appreciated.

Philip M
02-29-2012, 05:22 PM
a) You don't have a <div id = "Display_Topping_Price"></div>

b) You need to include an initial option

<option value = "">Select Pizza size ....</option>

as othwise the user cannot select (onchange) the Small Pizza

c) var Pizza_Topping_Price = document.getElementById("Pizza_Size").value;

d) = means assignment. == means comparison, so if(Pizza_Topping_Price = "Small_Pizza") { should be ==


There are other improvements you can make. Long names such as Pizza_Topping_Price are prone to typos and are best simplfied to (say) PTP.

Quizmaster: Gordon Brown compared himself which which character from Emily Bronte's "Wuthering Heights"?
Contestant: Charles Dickens.

germ1977
02-29-2012, 05:59 PM
The <div> tag is there


<p align="center"><div id = "Display_Topping_Price"></div>&nbsp;</p>

I will try the other suggestions and see if they work.

germ1977
02-29-2012, 06:17 PM
It works now...thank you!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum