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...

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...

Code:

<?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...

Thread: Help getting integer and text value from a checkbox

Thread Tools

Search Thread

Help getting integer and text value from a checkbox

Resolved....

Bookmarks

Bookmarks

Posting Permissions