JavaScript - Using If() With A Html Form Checkbox

document.cookie = "toppings=" + encodeURIComponent(document.getElementsByName("toppings[]").value);

document.cookie = "extra=" + encodeURIComponent(extra);

function validateOrder ()
{
	var crustSelection = document.orderForm.crust.value; 
	var crustPrice; //Adds $1 for Deep DishParmesagn, and Sourdough 
	var count = 0; //Amount of Toppings Selected
	var choice = ""; //Toppings Selected list
	var x = ""; //Don't need for the Cookie
	var extra = 0; //extra charge for toppings over 3
	try{
		  
        var error = ""; // Initialize Var to store the error messages.
        

	if(document.getElementById("delivery").checked != true &&
           document.getElementById("takeout").checked != true)
	{
           error=error+"Order Type is required.\n"
                }
	if(document.getElementById("fname").value == "")  
	{
        error = error + "First Name is required.\n";
        	}
        if(document.getElementById("lname").value == "") 
	{
        error = error + "Last Name is required.\n";
        	}
        if(document.getElementById("address").value == "") 
	{
        error = error + "Street address is required.\n";
        	}
        if (isNaN(document.getElementById("quantity")))
	{
error = error + "Enter Pizza Quantity in Numbers Only.\n";
			} 
	    if(document.getElementById("crust").value == "") 
	{
        error = error + "Crust Type is required.\n";
        	} 
		if(document.getElementsByName("toppings").value == 0) 
	{
        error = error + "Select at Least One Topping.\n";
        	} 

	if(error == "") 
	{
        // save all the information in the cookie
document.cookie = "firstName=" + encodeURIComponent(document.getElementById("fname").value);
document.cookie = "lastName=" + encodeURIComponent(document.getElementById("lname").value);
document.cookie = "address=" + encodeURIComponent(document.getElementById("address").value);
document.cookie = "order=" + encodeURIComponent((document.getElementById("delivery").checked) ? "delivery" : "takeout");
document.cookie = "quantity=" + encodeURIComponent(document.getElementById("quantity").value);
document.cookie = "quantity=" + encodeURIComponent(document.getElementById("quantity").value);
document.cookie = "crust=" + encodeURIComponent(document.getElementById("crust").value);
document.cookie = "toppings=" + encodeURIComponent(document.getElementsByName("toppings[]").value);      
alert("Order successfully Placed!");
		}
		else 
		{
             alert(error);
        }
    }
	catch(ex) 
	{
        alert("An error occurred!.\n" + "Error Name : " + ex.name + "\nError Message : " + ex.message);
    }
	
for (var i=1; i<11; i++) 
{
x = document.orderForm['toppings' + i].value;
if (document.orderForm['toppings' + i].checked) 
{
choice = choice + "  " +  x ;
count ++;   
} 
}  
if (choice.length <= 0) 
{
choice = choice + "NONE";
}
if (count > 3)
{
	extra = (count - 3) * 1 
}
document.cookie = "extra=" + encodeURIComponent(extra);  
}
</script>

<form name = "orderForm" onsubmit="validateOrder()">
<table width="600" border="0">
  <tr>
    <th scope="col" width="400" align="left"><b>First Name</b><br /><input type="text" id="fname" name="fname" size=30>
<br />
<br />
<b>Last Name</b><br />
<input type="text" id="lname" name="lname" size=30>
<br />
<br />
<b>Street Address</b><br />
<input type="text" id="address" name="address" size=30>
<br />
<br />
<input name="orderType" value="delivery" id="delivery" type="radio">Delivery</font>
<input name="orderType" value="takeOut" id="takeout" type="radio">Take Out</font></th>
    <th scope="col" width="200" align="Left">
    How Many Pizzas? <input type="text" id="quantity" name="quantity" size=5>
    <br />
    <br />
    <select name="crust" id="crust">
  <option selected value="false">Select Crust Type</option>
  <option value="regular">Regular Crust</option>
<option value="thin">Thin Crust</option>
  <option value="deep">Deep Dish</option>
  <option value="Parmesagn">Parmesagn Cheese</option>
  <option value="sourdough">Sourdough</option>
</select>
<br />
<br />
Select at Least One Topping:
<br />
<br />
<input name = "toppings1" type = "checkbox" value = "extraCheese"> Extra Cheese<br>
<input name = "toppings2" type = "checkbox" value = "sausage"> Sausage<br>
<input name = "toppings3" type = "checkbox" value = "pepperoni"> Pepperoni<br>
<input name = "toppings4" type = "checkbox" value = "bacon"> Bacon<br>
<input name = "toppings5" type = "checkbox" value = "canadianBacon"> Canadian Bacon<br>
<input name = "toppings6" type = "checkbox" value = "mushroom"> Mushroom<br>
<input name = "toppings7" type = "checkbox" value = "pineapple"> Pineapple<br>
<input name = "toppings8" type = "checkbox" value = "onion"> Onion<br>
<input name = "toppings9" type = "checkbox" value = "olive"> Olive<br>
<input name = "toppings10" type = "checkbox" value = "greenPepper"> Green Pepper<br></th>
  </tr>
</table>
<input name="submit" type="submit" value="submit" /><input name="" type="reset" />
</form>

<script type="text/javascript"> 
/* <![CDATA[ */
function processQueryString() {
var formData = location.search;
formData = formData.substring(1, formData.length);
while (formData.indexOf("+") != -1) {
	formData = formData.replace("+", " ");
}
formData = unescape(formData);
var formArray = formData.split("&");
for (var i=0; i < formArray.length; ++i) {
	//document.writeln(formArray[i] + "<br />");
	var sDataName = formArray[i].split("=")
	
switch (sDataName[0]) {

case ".lib_use":
     for (var j=0; j < document.getElementsByName(".lib_use").length; ++j) {
     if (document.getElementsByName(".lib_use").item(j).value == sDataName[1]) {
     document.getElementsByName(".lib_use").item(j).checked = true;
     //alert("lib_use set");
              }
 }
 break;
case ".lib_comp":
     if (sDataName[1] == 1) {
     document.getElementsByName(".lib_comp").checked = true;
     document.getElementsByName(".lib_comp").value= 1;
   } 
   else {
    document.getElementsByName(".lib_comp").checked = false; 
   document.getElementsByName(".lib_comp").value= 0;
 }			 
 break;	
default:
      alert("not caught = " + sDataName[0]);
       continue;
		
	}
}
}
/* ]]> */
</script>

<input type="checkbox" name=".lib_comp" id="lib_comp" value="1" />

<html>
<body>
<h1>Value Band Name Here</h1>
<br>
<br>
<h2>Band Biography</h2>
<br>
<VALUE Band BIO Here>
<br>
Albums :<br>
<VALUE ALBUM NAME, VALUE ALBUM YEAR,<br>
<br>
<img src="ALBUM ART LOCATION VALUE HERE">

<HTML><HEAD><TITLE>Electronic Deposting Form</TITLE>

<script language="JavaScript">
<!-- script start

function validateComplete(formObj) {
     if (emptyField(formObj.username))
          alert("Please enter the Username.");
     else if (emptyField(formObj.passwd))
          alert("Please enter the Password.");
     else if (emptyField(formObj.drop))
          alert("Please enter the Drop Folder.");

        else return true;

     return false;
}

// Check to see if field is empty

function emptyField(textObj)
{
     if (textObj.value.length == 0) return true;
     for (var i=0; i<textObj.value.length; ++i) {
          var ch = textObj.value.charAt(i);
          if (ch != ' ' && ch != '\t') return false;
     }
     return true;
}
function chklen() {

var un = document.getElementById("username").value
var len = un.length;
if (len > 15) {
alert ("ERROR!!Only 15 characters are allowed in Username!!");
document.getElementById("username").value = un.substring(0,15);  // remove excess characters
}
}

// script end -->
</script>

<td align="left" valign="top"><FORM name="form" action="../saveDP.cgi" method="post" onSubmit="return validateComplete(document.form)"><TABLE width="100%" cellPadding=2 cellSpacing=2>
      <TR>
        <TD width="26%" class="label"><B>Username </B></TD>
        <TD width="3%" class="label">:</TD>
        <TD width="71%"><INPUT maxLength=255 size=28 name=username id='username' onkeyup="chklen()">
        <TR>
          <TD class="label" ><B>Password </B></TD>
          <TD class="label">:</TD>
          <TD><INPUT type=password maxLength=255 size=28 name=passwd>

<TR>
        <TD class="label"><B> Environment  </B></TD>
        <TD class="label">:</TD>
        <TD><SELECT class="input" size=1 name=environ>
            <OPTION value=us selected><b> US </b></OPTION>
            <OPTION value=uk><b> UK </b></OPTION>
          </SELECT> </TD>
      </TR>
<TD colspan="3"><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="19%">&nbsp;</td>
            <td width="9%"><INPUT type=submit value=Submit v:shapes="_x0000_s1034">            </td>
            <td width="8%"><input type=reset value=Clear v:shapes="_x0000_s1035\"></td>
            <td width="64%">&nbsp;</td>
          </tr>
        </table></TD>
      </TR>

    function toggleTable(select)
    {
       if(select.value == "uk")
        {
            select.value = "uk";
            document.getElementById("region2").style.visibility = "collapse";
            document.getElementById("region1").style.visibility = "visible";
       }
       else if(select.value == "usa")
       {
            select.value = "usa";
            document.getElementById("region1").style.visibility = "collapse";
            document.getElementById("region2").style.visibility = "visible";
       }

    }

<tr><td>Location: </td><td><select name="location" onclick="toggleTable(this);">
                            <option value="none">Please Select One</option>
                            <option value="uk">UK</option>
                            <option value="usa">USA</option>
                        </select></td></tr>
                <tr id="region1"><td>Region: </td><td>
                        <select name="region">
                            <option value="uk1">uk1</option>
                            <option value="uk2">uk2</option>
                            </select></td></tr>
                        
                        <tr id="region2"><td>Region: </td><td>
                            <select name="region">
                            <option value="usa1">usa1</option>
                            <option value="usa2">usa2</option>
                        </select>
                    </td></tr>

//array information */
var car=new Array("Lamborghini Aventador", "Peugeot 107", "VW Golf", "Toyota Prius", "Kia Sedona", "Citroen 2CV", "Vauxhall Insignia", "Mercedes C180", "Reliant Robin", "Ford Fiesta");
var mpg=new Array(13, 61, 47, 65, 32, 62, 40, 30, 70, 49);
var passenger=new Array(2, 4, 5, 5, 7, 4, 5, 5, 2, 5);
var luggage=new Array(0, 1, 2, 2, 4, 1, 3, 2, 1, 2);
var fuel=new Array("Petrol", "Petrol", "Diesel", "Petrol", "Diesel", "Petrol", "Diesel", "Petrol", "Petrol", "Petrol");
var gearbox=new Array("Semi-Automatic", "Manual", "Manual", "Manual", "Manual", "Manual", "Automatic", "Automatic", "Manual", "Automatic");
var aircon=new Array("Yes", "No", "Yes", "Yes", "Yes", "No", "Yes", "Yes", "No", "Yes");
var daycost=new Array(2000, 30, 34, 44, 40, 25, 45, 87, 10, 31);
var weekendcost=new Array(3800, 90, 97, 110, 99, 70, 115, 243, 25, 90);
var weeklycost=new Array(12000, 135, 167, 183, 162, 124, 173, 560, 65, 130);

var cars = {};
for(var i=0;i<car.length;i++)
{
cars[i] = {
name: car[i],
mpg: mpg[i],
passenger: passenger[i],
luggage: luggage[i],
fuel: fuel[i],
gearbox: gearbox[i],
aircon: aircon[i],
daycost: daycost[i],
weekendcost: weekendcost[i],
weeklycost: weeklycost[i]
}
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Car Hires</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="array.js"></script>

</head>
<body id="main_body" >
	
	<img id="top" src="top.png" alt="">
	<div id="form_container">
	
		<h1><a>Car Hires</a></h1>
		<form id="myform" class="appnitro"  method="post" action="">
					<div class="form_description">
			<h2>Car Hires</h2>
			<p>Fill the form below, and we will provide you with a list of cars that match your requirements.</p>
		</div>						
			<ul >
			
					<li id="li_1" >
		<label class="description" for="element_1">Name </label>
		<span>
			<input id="element_1_1" name= "fname" class="element text" maxlength="255" size="8" value=""/>
			<label>First</label>
		</span>
		<span>
			<input id="element_1_2" name= "element_1_2" class="element text" maxlength="255" size="14" value=""/>
			<label>Last</label>
		</span> 
		</li>		<li id="li_2" >
		<label class="description" for="element_2">Email </label>
		<div>
			<input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li class="section_break">
			<h3>Section Break</h3>
			<p></p>
		</li>		<li id="li_4" >
		<label class="description" for="element_4">No. of Passengers </label>
		<div>
			<input id="element_4" name="passengers" class="element text small" type="text" maxlength="255" value=""/> 
		</div><p class="guidelines" id="guide_4"><small>Enter the number of passengers in numerical format</small></p> 
		</li>		<li id="li_5" >
		<label class="description" for="element_5">Items of Luggage </label>
		<span>
			<input id="element_5_1" name="luggage" class="element radio" type="radio" value="1" />
<label class="choice" for="element_5_1">1</label>
<input id="element_5_2" name="luggage" class="element radio" type="radio" value="2" />
<label class="choice" for="element_5_2">2</label>
<input id="element_5_3" name="luggage" class="element radio" type="radio" value="3" />
<label class="choice" for="element_5_3">3</label>
<input id="element_5_4" name="luggage" class="element radio" type="radio" value="4" />
<label class="choice" for="element_5_4">4</label>

		</span> 
		</li>		<li id="li_6" >
		<label class="description" for="element_6">Fuel Type </label>
		<span>
			<input id="element_6_1" name="fuel" class="element radio" type="radio" value="1" />
<label class="choice" for="element_6_1">Diesel</label>
<input id="element_6_2" name="fuel" class="element radio" type="radio" value="2" />
<label class="choice" for="element_6_2">Petrol</label>

		</span> 
		</li>		<li id="li_7" >
		<label class="description" for="element_7">Transmission/Gear Box </label>
		<span>
			<input id="element_7_1" name="gearbox" class="element radio" type="radio" value="1" />
<label class="choice" for="element_7_1">Automatic</label>
<input id="element_7_2" name="gearbox" class="element radio" type="radio" value="2" />
<label class="choice" for="element_7_2">Manual</label>

		</span> 
		</li>		<li id="li_8" >
		<label class="description" for="element_8">Airconditioning </label>
		<span>
			<input id="element_8_1" name="aircon" class="element radio" type="radio" value="1" />
<label class="choice" for="element_8_1">Yes</label>
<input id="element_8_2" name="aircon" class="element radio" type="radio" value="2" />
<label class="choice" for="element_8_2">No</label>

		</span> 
		</li>		
		
<li id="li_9" >
		<label class="description" for="element_5">Miles Per Gallon</label>
		<span>
			<input id="element_5_1" name="MPG" class="element radio" type="radio" value="1" />
<label class="choice" for="element_5_1">10-30</label>
<input id="element_5_2" name="MPG" class="element radio" type="radio" value="2" />
<label class="choice" for="element_5_2">30-50</label>
<input id="element_5_3" name="MPG" class="element radio" type="radio" value="3" />
<label class="choice" for="element_5_3">50-80</label>
		</span> 
		</li> 	<li id="li_10" >
		<label class="description" for="element_9">Duration of Rental </label>
		<div>
		<select class="element select medium" id="element_9" name="element_9"> 
			<option value="" selected="selected"></option>
<option value="1" >Day</option>
<option value="2" >Weekend</option>
<option value="3" >Full Week</option>


		</select>
		</div> 
		</li>
			
					<li class="buttons">
			    <input type="hidden" name="form_id" value="365314" />
			    
				<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
		</li>
			</ul>
		</form>	
		<div id="footer">
			Car Hire Form</a>
		</div>
	</div>
	<img id="bottom" src="bottom.png" alt="">
	</body>
</html>