mds1124
03-02-2009, 04:11 AM
Ok...Putting together what I thought would be a rather simple form...
User selects different options to make an order and function calculates and displays the order...
I am having MAJOR issues with the checkboxes...Each checkbox that is checked costs $1.00 regarless of size and I need to output the text value of each checkbox checked, as well...
:mad::confused:Whenever I check a checkbox I get a Runtime Error - Line 33 - Error: 'Topping' is undefined...
I've highlighted the problem area in red in the code - I had also added an alert to see what the value was, but it never geets to the alert...
Here's my entire code: Can't get it to calculate with the checkboxes, nor output the string values for the checkboxes checked...
Any assistance anyone could provide would be greatly appreciated...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Pizza Test</title>
<script>
var intToppings = 0;
var strToppings = "";
var Size;
var Toppings;
function ProcessForm(){
//this is the main function - will call other functions to get part of job done
//this one sort of controls whole processing
//see if form data is valid - if it is - then calculate
if (ValidateForm()){
//calculate tuition - first by pulling all values from form that
//are needed then calling function
//find what size was selected from radio button - loop thru
for(var i=0;i<document.frmPizza.rbType.length;i++){
//if we find the one that is checked
if (document.frmPizza.rbType[i].checked){
//get its value
Size=document.frmPizza.rbType[i].value;
}
}
//pull value from number of checkboxes checked for toppings and the String Values of the toppings
for(var i=0;i<document.frmPizza.Topping.length;i++){
if(document.frmPizza.Topping[i].checked){
strToppings += Topping[i].value + "";
intToppings ++;
alert(strToppings);
}
} //call function, passing all necessary arguments and storing result in price
totalPrice=CalculateCost(Size, intToppings);
//put result in div
document.getElementById("results").innerHTML= '<table border="2" width="75%";>' +
"<tr><td>Size:</td><td>"+Size+"</td></tr>" +
"<tr><td>Toppings:</td><td>"+strToppings+"</td></tr>" +
"<tr><td>Cost:</td><td>"+totalPrice+"</td></tr></table>";
}
}
function ValidateForm(){
var bValid;
var bSizeSelected;
//clear out any previous errors
document.getElementById("errPhone").innerHTML="";
document.getElementById("errSize").innerHTML="";
//assume form is valid til we find an error
bValid=true;
//see if phone is empty
if (document.getElementById("txtPhone").value==""){
//if it is form is not valid, display error
bValid=false;
document.getElementById("errPhone").innerHTML="Phone Missing";
}
//assume no size is selected
bSizeSelected=false;
//loop thru - if we found a rb that is checked then it has a value
for(var i=0;i<document.frmPizza.rbType.length;i++){
if (document.frmPizza.rbType[i].checked){
bSizeSelected=true;
}
}
//if no size is selected then form is invalid, display error
if (bSizeSelected==false){
document.getElementById("errSize").innerHTML="Missing Size";
bValid=false;
}
//return whether form is valid
return bValid;
}
function CalculateCost(argSize, argToppings){
//notice how this function does not refer to anything on the form
//anything it needs gets passed as arguments - and it returns answer to
//whoever called it - this function could be reused on other forms
var cost = 0;
var toppings = 1.00;
var price;
var totalprice;
if (argSize=="S") price=8.00;
else if (argSize=="M") price=12.00;
else price=16.00;
totalPrice=(price + (toppings * intToppings)).toFixed(2);
return totalPrice;
}
</script>
</head>
<body>
<h1>Smeck's Pizzeria (Lab 3)</h1>
<form name="frmPizza">
<table>
<tr>
<td>Phone:</td>
<td><input type="text" id="txtPhone" name="txtPhone"/>
<span id="errPhone"></span>
</td>
</tr>
<tr>
<td>Size:</td>
<td>Small:<input type="radio" name="rbType" value="S" />
Medium:<input type="radio" name="rbType" value="M" />
Large:<input type="radio" name="rbType" value="L" />
<span id="errSize"></span>
</td>
</tr>
<tr>
<td>Toppings:</td>
<td>Double Cheese:<input type="checkbox" name="Topping" ID="Topping" value="Double Cheese" />
Sausage:<input type="checkbox" name="Topping" ID="Topping" value="Sausage" />
Pepperoni:<input type="checkbox" name="Topping" ID="Topping" value="Pepperoni" />
Mushrooms:<input type="checkbox" name="Topping" ID="Topping" value="Mushrooms" />
</td>
</tr>
<tr>
<td> </td>
<td><input value="Process Order" type="button" name="btnCalc" onclick="ProcessForm();"/></td>
</tr>
<tr>
<td> </td>
<td><span id="results"></span></td>
</tr>
</table>
</form>
</body>
</html>
User selects different options to make an order and function calculates and displays the order...
I am having MAJOR issues with the checkboxes...Each checkbox that is checked costs $1.00 regarless of size and I need to output the text value of each checkbox checked, as well...
:mad::confused:Whenever I check a checkbox I get a Runtime Error - Line 33 - Error: 'Topping' is undefined...
I've highlighted the problem area in red in the code - I had also added an alert to see what the value was, but it never geets to the alert...
Here's my entire code: Can't get it to calculate with the checkboxes, nor output the string values for the checkboxes checked...
Any assistance anyone could provide would be greatly appreciated...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Pizza Test</title>
<script>
var intToppings = 0;
var strToppings = "";
var Size;
var Toppings;
function ProcessForm(){
//this is the main function - will call other functions to get part of job done
//this one sort of controls whole processing
//see if form data is valid - if it is - then calculate
if (ValidateForm()){
//calculate tuition - first by pulling all values from form that
//are needed then calling function
//find what size was selected from radio button - loop thru
for(var i=0;i<document.frmPizza.rbType.length;i++){
//if we find the one that is checked
if (document.frmPizza.rbType[i].checked){
//get its value
Size=document.frmPizza.rbType[i].value;
}
}
//pull value from number of checkboxes checked for toppings and the String Values of the toppings
for(var i=0;i<document.frmPizza.Topping.length;i++){
if(document.frmPizza.Topping[i].checked){
strToppings += Topping[i].value + "";
intToppings ++;
alert(strToppings);
}
} //call function, passing all necessary arguments and storing result in price
totalPrice=CalculateCost(Size, intToppings);
//put result in div
document.getElementById("results").innerHTML= '<table border="2" width="75%";>' +
"<tr><td>Size:</td><td>"+Size+"</td></tr>" +
"<tr><td>Toppings:</td><td>"+strToppings+"</td></tr>" +
"<tr><td>Cost:</td><td>"+totalPrice+"</td></tr></table>";
}
}
function ValidateForm(){
var bValid;
var bSizeSelected;
//clear out any previous errors
document.getElementById("errPhone").innerHTML="";
document.getElementById("errSize").innerHTML="";
//assume form is valid til we find an error
bValid=true;
//see if phone is empty
if (document.getElementById("txtPhone").value==""){
//if it is form is not valid, display error
bValid=false;
document.getElementById("errPhone").innerHTML="Phone Missing";
}
//assume no size is selected
bSizeSelected=false;
//loop thru - if we found a rb that is checked then it has a value
for(var i=0;i<document.frmPizza.rbType.length;i++){
if (document.frmPizza.rbType[i].checked){
bSizeSelected=true;
}
}
//if no size is selected then form is invalid, display error
if (bSizeSelected==false){
document.getElementById("errSize").innerHTML="Missing Size";
bValid=false;
}
//return whether form is valid
return bValid;
}
function CalculateCost(argSize, argToppings){
//notice how this function does not refer to anything on the form
//anything it needs gets passed as arguments - and it returns answer to
//whoever called it - this function could be reused on other forms
var cost = 0;
var toppings = 1.00;
var price;
var totalprice;
if (argSize=="S") price=8.00;
else if (argSize=="M") price=12.00;
else price=16.00;
totalPrice=(price + (toppings * intToppings)).toFixed(2);
return totalPrice;
}
</script>
</head>
<body>
<h1>Smeck's Pizzeria (Lab 3)</h1>
<form name="frmPizza">
<table>
<tr>
<td>Phone:</td>
<td><input type="text" id="txtPhone" name="txtPhone"/>
<span id="errPhone"></span>
</td>
</tr>
<tr>
<td>Size:</td>
<td>Small:<input type="radio" name="rbType" value="S" />
Medium:<input type="radio" name="rbType" value="M" />
Large:<input type="radio" name="rbType" value="L" />
<span id="errSize"></span>
</td>
</tr>
<tr>
<td>Toppings:</td>
<td>Double Cheese:<input type="checkbox" name="Topping" ID="Topping" value="Double Cheese" />
Sausage:<input type="checkbox" name="Topping" ID="Topping" value="Sausage" />
Pepperoni:<input type="checkbox" name="Topping" ID="Topping" value="Pepperoni" />
Mushrooms:<input type="checkbox" name="Topping" ID="Topping" value="Mushrooms" />
</td>
</tr>
<tr>
<td> </td>
<td><input value="Process Order" type="button" name="btnCalc" onclick="ProcessForm();"/></td>
</tr>
<tr>
<td> </td>
<td><span id="results"></span></td>
</tr>
</table>
</form>
</body>
</html>