PDA

View Full Version : Resolved Help getting integer and text value from a checkbox



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>&nbsp;</td>
<td><input value="Process Order" type="button" name="btnCalc" onclick="ProcessForm();"/></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><span id="results"></span></td>
</tr>
</table>
</form>

</body>
</html>

mds1124
03-02-2009, 04:58 AM
Resolved - Missing the document.frmPizza. from line 34...

Thanks anyways...