Menu
I’m having trouble with an onsubmit function that should be simple. Originally, the checkPizza() function was working and created an error message if the user tried to submit the form without selecting a pizza. Somewhere along the way it stopped working and I’m not sure why.
[code=html]<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Discovery 5-2</title>
<style>
h1, p {font-family: Tahoma, Verdana, Arial, sans-serif}
.price {font-style: italic; color: #9E8118; font-size:small}
</style>
<script type=”text/javascript”>
/* <![CDATA[ */
function checkPizza() {
var pizzaSelected = false;
for (var i = 0; i < 7; ++i) {
if (document.forms[0].pizzas[i].checked == true) {
pizzaSelected = true;
break;
}
}
if (pizzaSelected != true) {
window.alert(“You must select a pizza to continue.”);
return false;
}
}//This is the function that isn’t working
function calcTotal() {
var total = 0;
var veg = 13.79;
var works = 14.29;
var triCh = 12.29;
var tiki = 12.79;
var carn = 13.79;
var basic = 10.29;
var addOn = 1.09;
for(var i = 0; i < 12; i++){
if (document.forms[0].toppings[i].checked == true)
total += addOn;}
if (document.forms[0].pizzas[0].checked == true) {
total += veg;}
else if(document.forms[0].pizzas[1].checked == true){
total += works;}
else if(document.forms[0].pizzas[2].checked == true) {
total += triCh;}
else if(document.forms[0].pizzas[3].checked == true){
total += tiki;}
else if(document.forms[0].pizzas[4].checked == true){
total += carn;}
else if(document.forms[0].pizzas[5].checked == true){
total += basic;}
document.forms[0].runningTotal.value = total.toFixed(2);
}
var vegetarian = “A garden fresh variety of onions, green peppers, mushrooms, black olives, roasted red peppers, artichoke hearts, and tomatoes”
var theWorks = “For those who want the best of both worlds: Canadian bacon, sausage, and pepperoni with black olives, onions, green peppers, and mushrooms.”
var triCheese = “A delectable blend of mozzarella, asiago, and provolone.”
var tikiC = “Tiki’s personal favorite! Savory slices of Canadian bacon and chunks of sweet, golden pineapple, piled high with Tiki’s secret sauce.”
var carnivore = “Pepperoni, sausage, Canadian bacon, salami, and bacon make for a ferociously delicious dish for the animal in you”
var theBasic = “A basic pie with classic tomato sauce and mozzarella cheese. Perfect in its own simplicity or as a base for the toppings of your choice.”
/* ]]> */
</script>
</head>
<body>
<table rules=”none”>
<tr >
<td colspan=”3″>
<h1>Tiki’s Takeaway</h1>
</td>
<tr>
<td colspan=”3″>
<p>Welcome to Tiki’s Takeaway! Build your pizza from the menu options below. </p>
</td>
</tr>
<tr>
<td valign=”top”>
<form method=”post” onsubmit=”return checkPizza();”>
<p>Signature Pizzas<br/>
//And these are the radio buttons that should be being evaluated by the function
<input type=”radio” name=”pizzas” value=”vegetarian”
onmouseover=”document.forms[0].pizzaDesc.value=vegetarian”
onmouseout=”document.forms[0].pizzaDesc.value=null”
onchange=”calcTotal()”/>Vegetarian <span class=”price”>$13.79</span><br/>
<input type=”radio” name=”pizzas” value = “works”
onmouseover=”document.forms[0].pizzaDesc.value=theWorks”
onmouseout=”document.forms[0].pizzaDesc.value=null”
onchange = “calcTotal()”/>The Works<span class=”price”>$14.29</span><br/>
<input type=”radio” name=”pizzas” value=”triple_cheese”
onmouseover=”document.forms[0].pizzaDesc.value=triCheese”
onmouseout=”document.forms[0].pizzaDesc.value=null”
onchange=”calcTotal()”/>Triple Cheese<span class=”price”>$12.29</span><br/>
<input type=”radio” name=”pizzas” value=”Tiki’s_Classic”
onmouseover=”document.forms[0].pizzaDesc.value=tikiC”
onmouseout=”document.forms[0].pizzaDesc.value=null”
onchange=”calcTotal()”/>Tiki’s Classic <span class=”price”>$12.79</span><br/>
<input type=”radio” name=”pizzas” value=”carnivore”
onmouseover=”document.forms[0].pizzaDesc.value=carnivore”
onmouseout=”document.forms[0].pizzaDesc.value=null”
onchange=”calcTotal()”/>Carnivore<span class=”price”>$13.79</span><br/>
<input type=”radio” name=”pizzas” value=”basic”
onmouseover=”document.forms[0].pizzaDesc.value=theBasic”
onmouseout=”document.forms[0].pizzaDesc.value=null”
onchange=”calcTotal()”/>The Basic<span class=”price”>$10.29</span><br/>
</p>
</td>
<td colspan=”2″ valign=”top”>
<p>
<br/><br/>
<textarea name=”pizzaDesc” cols=”74″ rows=”2″ style=”background-color: Transparent; border: none; overflow: hidden; font: 14px tahoma; color:#9E8118; font-style:italic”></textarea></p>
</td>
</tr>
<tr>
<td width=”230px”>
<p>Additional Toppings <span class=”price”>$1.09 each</span><br/>
<input type = “checkbox” name = “toppings”
value = “pepperoni” onchange=”calcTotal()” />Pepperoni <br />
<input type = “checkbox” name = “toppings”
value = “banana_peppers” onchange=”calcTotal()”/>Banana Peppers <br />
<input type = “checkbox” name = “toppings”
value = “anchovies” onchange=”calcTotal()”/>Anchovies <br />
<input type = “checkbox” name = “toppings”
value = “onions” onchange=”calcTotal()”/>Onions <br />
<input type = “checkbox” name = “toppings”
value = “mushrooms” onchange=”calcTotal()”/>Mushrooms<br />
<input type = “checkbox” name = “toppings”
value = “green_peppers” onchange=”calcTotal()”/>Green peppers<br />
</td>
<td width=”230px”>
<br/>
<p>
<input type = “checkbox” name = “toppings”
value = “Canadian_bacon” onchange=”calcTotal()”/>Canadian bacon <br />
<input type = “checkbox” name = “toppings”
value = “cheese” onchange=”calcTotal()”/>Cheese <br />
<input type = “checkbox” name = “toppings”
value = “pineapples” onchange=”calcTotal()”/>Pineapple <br />
<input type = “checkbox” name = “toppings”
value = “spinach” onchange=”calcTotal()”/>Spinach <br />
<input type = “checkbox” name = “toppings”
value = “black_olives” onchange=”calcTotal()”/>Black Olives <br />
<input type = “checkbox” name = “toppings”
value = “sausage” onchange=”calcTotal()”/>Sausage<br />
</p>
</td>
<td>
<br/>
<p>
<input type = “checkbox” name = “toppings”
value = “Canadian_bacon” onchange=”calcTotal()”/>Artichoke hearts <br />
<input type = “checkbox” name = “toppings”
value = “cheese” onchange=”calcTotal()”/>Salami <br />
<input type = “checkbox” name = “toppings”
value = “pineapples” onchange=”calcTotal()”/>Bacon <br />
<input type = “checkbox” name = “toppings”
value = “spinach” onchange=”calcTotal()”/>Roasted red peppers <br />
<input type = “checkbox” name = “toppings”
value = “black_olives” onchange=”calcTotal()”/>Tomatoes <br />
<input type = “checkbox” name = “toppings”
value = “sausage” onchange=”calcTotal()”/>Provolone <br />
</p>
</td>
<tr>
<td colspan=”3″>
<p>Total<br />
<textarea name=”runningTotal” cols=”10″ rows=”1″ value=”0″ ></textarea><br /> </p>
<input type = “submit” value = “Submit” /> <input type = “reset” />
</form>
</td>
</tr>
</table>
</body>
</html>
The error console says that it cannot read the property “checked”, but I don’t know why not. It was working before and I haven’t changed anything that I know of, so I’m not sure what’s causing the problem.
Any and all help will be GREATLY appreciated! I’m completely stumped. ?