How to display values in text area based on check boxes and radio buttons?

This site is best viewed in a modern browser with JavaScript enabled.

How to display values in text area based on check boxes and radio buttons?

jumpinjackflash

Hello, I am trying to make a basic pizza order form and I am stuck. I want to be able to display the pizza size, toppings, and total price based on what the user checks in the check boxes and radio buttons.

The black text area should look something like this after the user hits submit:

"Medium Pizza
Toppings:
pepperoni, olives, peppers
Price - $7.85"

Here is my code:

<html lang="en">

 <head><title>Pizza Order Form</title>
    <style type="text/css">

   .outp {border-style:solid;background-color:white;
           border-color:red;padding:1em; border-width: .5em;}
    .notes {font-size:smaller;font-style:italic;}

	p {margin-left: 15%; width: 65%;}

	textarea {resize : none;}

</style>
   <script type="text/javascript">



  </script>

 </head>
 <body>

  <h2 align = "middle" >Joe's Pizza Palace 
	  <br /> 
	  On-line Order Form
  </h2>

   <form align = "middle" name="wdfor" action="" method="post" >

 <p id = "op" class = "outp" > <b /> Select the size Pizza you want: &nbsp;&nbsp;
    <input type="radio" name = "size" value = "small"> Small - $4.00 <b />
	<input type="radio" name = "size" value = "medium"> Medium - $6.00 <b />
	<input type="radio" name = "size" value = "large"> Large - $8.00 <b />
 </p>

 <p id = "op" class = "outp" > <b /> Select the toppings: &nbsp;&nbsp;
    <input type="checkbox" name = "size" value = "pepperoni"> Pepperoni ($0.75) <b />
	<input type="checkbox" name = "size" value = "olives"> Olives ($0.60) <b />
	<input type="checkbox" name = "size" value = "sausage"> Sausage ($0.75) <b /> <br /> 
	<input type="checkbox" name = "size" value = "peppers"> Peppers ($0.50) <b />																					   
	<input type="checkbox" name = "size" value = "onions"> Onions ($0.50) <b />
	<input type="checkbox" name = "size" value = "cheese"> Cheese Only <b />



  </form> 
   <p id="op" class="outp">
    To obtain the price of your order click on the price button below:

<br /><br />

<input type="button" align = "left"; value="Price (Submit Button)"/>

<input type="reset" align = "left"; value="Clear Form"/>

<br /><br />

<textarea style="border-color:black" align = "right" class="outp" id="opta" rows="6" cols="40" onfocus="this.blur()">
 Text area for submitted info.
 </textarea>

   <br />
   </p>


 </body>
</html>

darkylord

The whole job can be done with javascript like this :

<html lang="en">

 <head><title>Pizza Order Form</title>
    <style type="text/css">

   .outp {border-style:solid;background-color:white;
           border-color:red;padding:1em; border-width: .5em;}
    .notes {font-size:smaller;font-style:italic;}

	p {margin-left: 15%; width: 65%;}

	textarea {resize : none;}

</style>
   <script type="text/javascript">
    function calculate(){
     var type;
     var newline="
";
	 var sum=0;
	 var toppings="";
     if( document.getElementById("small").checked==true){
      type="Small Pizza";
	  sum+=4;
     }
     if( document.getElementById("medium").checked==true){
      type="Medium Pizza";
	  sum+=6;
     }
     if( document.getElementById("large").checked==true){
      type="Large Pizza";
	  sum+=8;
     }
	 if( document.getElementById("pepperoni").checked==true){
      toppings=toppings+"pepperoni, ";
	  sum+=0.75;
     }
	 if( document.getElementById("olives").checked==true){
      toppings=toppings+"olives, ";
	  sum+=0.6;
     }
	 if( document.getElementById("sausage").checked==true){
      toppings=toppings+"sausage, ";
	  sum+=0.75;
     }
	 if( document.getElementById("peppers").checked==true){
      toppings=toppings+"peppers, ";
	  sum+=0.5;
     }
	 if( document.getElementById("onions").checked==true){
      toppings=toppings+"onions, ";
	  sum+=0.5;
     }
	 if( document.getElementById("cheese").checked==true){
      toppings=toppings+"Cheese Only, ";
     }

 var length = toppings.length;
 toppings = toppings.slice(0,length-2);

 document.getElementById("opta").innerHTML = type+newline+"Toppings:"+newline+toppings+newline+"Price - $"+sum;
}


   </script>

 </head>
 <body>

  <h2 align = "middle" >Joe's Pizza Palace 
	  <br /> 
	  On-line Order Form
  </h2>

   <form align = "middle" name="wdfor" action="" method="post" >

 <p id = "op" class = "outp" > <b /> Select the size Pizza you want: &nbsp;&nbsp;
    <input type="radio" name = "size" id="small" value = "small"> Small - $4.00 <b />
	<input type="radio" name = "size" id="medium" value = "medium"> Medium - $6.00 <b />
	<input type="radio" name = "size" id="large" value = "large"> Large - $8.00 <b />
 </p>

 <p id = "op" class = "outp" > <b /> Select the toppings: &nbsp;&nbsp;
    <input type="checkbox" name = "size" id="pepperoni" value = "pepperoni"> Pepperoni ($0.75) <b />
	<input type="checkbox" name = "size" id="olives" value = "olives"> Olives ($0.60) <b />
	<input type="checkbox" name = "size" id="sausage" value = "sausage"> Sausage ($0.75) <b /> <br /> 
	<input type="checkbox" name = "size" id="peppers" value = "peppers"> Peppers ($0.50) <b />																					   
	<input type="checkbox" name = "size" id="onions" value = "onions"> Onions ($0.50) <b />
	<input type="checkbox" name = "size" id="cheese" value = "cheese"> Cheese Only <b />



  </form> 
   <p id="op" class="outp">
    To obtain the price of your order click on the price button below:

<br /><br />

<input type="button" align = "left" onclick="calculate();" value="Price (Submit Button)"/>

<input type="reset" align = "left" value="Clear Form"/>

<br /><br />

<textarea class="outp" id="opta" style="border-color:black;" rows="6" cols="40" >
 Text area for submitted info.
</textarea>

   <br />
   </p>


 </body>
</html>

jumpinjackflash

darkylord;1233835 wrote:

The whole job can be done with javascript like this :

<html lang="en">

 <head><title>Pizza Order Form</title>
    <style type="text/css">

   .outp {border-style:solid;background-color:white;
           border-color:red;padding:1em; border-width: .5em;}
    .notes {font-size:smaller;font-style:italic;}

	p {margin-left: 15%; width: 65%;}

	textarea {resize : none;}

</style>
   <script type="text/javascript">
    function calculate(){
     var type;
     var newline="
";
	 var sum=0;
	 var toppings="";
     if( document.getElementById("small").checked==true){
      type="Small Pizza";
	  sum+=4;
     }
     if( document.getElementById("medium").checked==true){
      type="Medium Pizza";
	  sum+=6;
     }
     if( document.getElementById("large").checked==true){
      type="Large Pizza";
	  sum+=8;
     }
	 if( document.getElementById("pepperoni").checked==true){
      toppings=toppings+"pepperoni, ";
	  sum+=0.75;
     }
	 if( document.getElementById("olives").checked==true){
      toppings=toppings+"olives, ";
	  sum+=0.6;
     }
	 if( document.getElementById("sausage").checked==true){
      toppings=toppings+"sausage, ";
	  sum+=0.75;
     }
	 if( document.getElementById("peppers").checked==true){
      toppings=toppings+"peppers, ";
	  sum+=0.5;
     }
	 if( document.getElementById("onions").checked==true){
      toppings=toppings+"onions, ";
	  sum+=0.5;
     }
	 if( document.getElementById("cheese").checked==true){
      toppings=toppings+"Cheese Only, ";
     }

 var length = toppings.length;
 toppings = toppings.slice(0,length-2);

 document.getElementById("opta").innerHTML = type+newline+"Toppings:"+newline+toppings+newline+"Price - $"+sum;
}


   </script>

 </head>
 <body>

  <h2 align = "middle" >Joe's Pizza Palace 
	  <br /> 
	  On-line Order Form
  </h2>

   <form align = "middle" name="wdfor" action="" method="post" >

 <p id = "op" class = "outp" > <b /> Select the size Pizza you want: &nbsp;&nbsp;
    <input type="radio" name = "size" id="small" value = "small"> Small - $4.00 <b />
	<input type="radio" name = "size" id="medium" value = "medium"> Medium - $6.00 <b />
	<input type="radio" name = "size" id="large" value = "large"> Large - $8.00 <b />
 </p>

 <p id = "op" class = "outp" > <b /> Select the toppings: &nbsp;&nbsp;
    <input type="checkbox" name = "size" id="pepperoni" value = "pepperoni"> Pepperoni ($0.75) <b />
	<input type="checkbox" name = "size" id="olives" value = "olives"> Olives ($0.60) <b />
	<input type="checkbox" name = "size" id="sausage" value = "sausage"> Sausage ($0.75) <b /> <br /> 
	<input type="checkbox" name = "size" id="peppers" value = "peppers"> Peppers ($0.50) <b />																					   
	<input type="checkbox" name = "size" id="onions" value = "onions"> Onions ($0.50) <b />
	<input type="checkbox" name = "size" id="cheese" value = "cheese"> Cheese Only <b />



  </form> 
   <p id="op" class="outp">
    To obtain the price of your order click on the price button below:

<br /><br />

<input type="button" align = "left" onclick="calculate();" value="Price (Submit Button)"/>

<input type="reset" align = "left" value="Clear Form"/>

<br /><br />

<textarea class="outp" id="opta" style="border-color:black;" rows="6" cols="40" >
 Text area for submitted info.
</textarea>

   <br />
   </p>


 </body>
</html>

How do I get it to display in the text area after I hit submit though?

darkylord

With this line :
document.getElementById("opta").innerHTML = type+newline+"Toppings:"+newline+toppings+newline+"Price - $"+sum;

The textarea has the id "opta" so you get the element like document.getElementById("opta") .Then you edit it's innerhtml (whatever is between the <textarea> and </textarea>) by giving a new string to the value element.innerHTML (or document.getElementById("opta").innerHTML in this case).
So you basically call a function by clicking the button that checks which checkboxes and radioboxes are checked, creates a string (or multiple strings with my example above) and then sends this strings to replace anything inside the textarea.
Just one thing about the textarea, you can't put html code in it because it will show it as any other text, you may have to use ascii codes for some things like new line etc.

jumpinjackflash

Hmm. It doesn't seem to be showing anything in the text area once I hit submit. Do I need to add anything else to get it to show up?

darkylord

I see, it didn't keep the ascii codes for next line and ruined the javascript. Well since I can't post it directly in the forum because it automatically makes it a new line, you will have to fix the line 18 :
var newline="
";
as
var newline="&# 13 ;";
but without the space between the # and 1 as well as between the 3 and ;
Then it should work properly.

jumpinjackflash

Ah okay, thank you very much. Let me try it now

jumpinjackflash

EDIT nevermind, that was my mistake. Let me try again.

jumpinjackflash

darkylord;1233877 wrote:
I see, it didn't keep the ascii codes for next line and ruined the javascript. Well since I can't post it directly in the forum because it automatically makes it a new line, you will have to fix the line 18 :
var newline="
";
as
var newline="&# 13 ;";
but without the space between the # and 1 as well as between the 3 and ;
Then it should work properly.

Edit I had to add back in the "onfocus="this.blur()"" event, and now its working, THANK YOU!

jumpinjackflash

Only one more question, thank you so much for helping me. How do I get the Clear button to reset the TextArea also? It clears the whole form but it leaves the text area with all the text still.

darkylord

Add an event listener to the button which will call a function clear() like the code below :

<input type="reset" align = "left" onclick="clear();" value="Clear Form"/>

Then in the javascript make a new function that will reset the textarea's text (here I have put it in the original, you may want to change it to something else or leave it blank "") :

function clear(){
		document.getElementById("opta").innerHTML = "Text area for submitted info.";
    }

jumpinjackflash

This is what I have total and it still isn't clearing the text area:

<html lang="en">

 <head><title>Pizza Order Form</title>
    <style type="text/css">

   .outp {border-style:solid;background-color:white;
           border-color:red;padding:1em; border-width: .5em;}
    .notes {font-size:smaller;font-style:italic;}

	p {margin-left: 15%; width: 65%;}

	textarea {resize : none;}

</style>
   <script type="text/javascript">

function calculate(){
 var type;
 var newline= "&#13;";
 var sum=0.00;
 var toppings="";

 if( document.getElementById("small").checked==true){
  type="Small Pizza";
  sum+=4.00;
 }
 if( document.getElementById("medium").checked==true){
  type="Medium Pizza";
  sum+=6.00;
 }
 if( document.getElementById("large").checked==true){
  type="Large Pizza";
  sum+=8.00;
 }

 if( document.getElementById("cheese").checked==true){
  toppings="Cheese Only, "
  }

 if( document.getElementById("pepperoni").checked==true){
  toppings=toppings+"pepperoni, ";
  sum+=0.75;
 }
 if( document.getElementById("olives").checked==true){
  toppings=toppings+"olives, ";
  sum+=0.60;
 }
 if( document.getElementById("sausage").checked==true){
  toppings=toppings+"sausage, ";
  sum+=0.75;
 }
 if( document.getElementById("peppers").checked==true){
  toppings=toppings+"peppers, ";
  sum+=0.50;
 }
 if( document.getElementById("onions").checked==true){
  toppings=toppings+"onions, ";
  sum+=0.50;
 }

 var length = toppings.length;
 toppings = toppings.slice(0,length-2);

 document.getElementById("opta").innerHTML = type+newline+"Toppings:"+newline+toppings+newline+"Price - $"+sum.toFixed(2);
}

function clear(){
	document.getElementById("opta").innerHTML = "Text area for submitted info.";
}


   </script>

 </head>
 <body>

  <h2 align = "middle" >Joe's Pizza Palace 
	  <br /> 
	  On-line Order Form
  </h2>

   <form align = "middle" name="wdfor" action="" method="post" >

 <p id = "op" class = "outp" > <b /> Select the size Pizza you want: &nbsp;&nbsp;
    <input type="radio" name = "size" id="small" value = "small"> Small - $4.00 <b />
	<input type="radio" name = "size" id="medium" value = "medium" checked> Medium - $6.00 <b />
	<input type="radio" name = "size" id="large" value = "large"> Large - $8.00 <b />
 </p>

 <p id = "op1" class = "outp" > <b /> Select the toppings: &nbsp;&nbsp;
    <input type="checkbox" name = "size" id="pepperoni" value = "pepperoni"> Pepperoni ($0.75) <b />
	<input type="checkbox" name = "size" id="olives" value = "olives"> Olives ($0.60) <b />
	<input type="checkbox" name = "size" id="sausage" value = "sausage"> Sausage ($0.75) <b /> <br /> 
	<input type="checkbox" name = "size" id="peppers" value = "peppers"> Peppers ($0.50) <b />																					   
	<input type="checkbox" name = "size" id="onions" value = "onions"> Onions ($0.50) <b />
	<input type="checkbox" name = "size" id="cheese" value = "cheese"> Cheese Only <b />



   <p id="op2" class="outp">
    To obtain the price of your order click on the price button below:

<br /><br />

<input type="button" align = "left" onclick="calculate();" value="Price (Submit Button)"/>

<input type="reset" align = "left" onclick="clear();" value="Clear Form"/>

<br /><br />

<textarea class="outp" id="opta" style="border-color:black;" rows="6" cols="40" onfocus="this.blur()" >
</textarea>

   <br />
   </p>
   </form>


 </body>
</html>

darkylord

Yea I just tested it a bit myself and it seems that clear() isn't working with that name. But if you change the function's name to something like cleanit() it will work, change it into that in both the javascript and the button's listener.

jumpinjackflash

Awesome, it works now. Thank you so much. Do you know how to make it so if I check "cheese only" it checks to make sure no other checkboxes are checked, and if they are, it displays an alert box and unchecks the other boxes?

darkylord

Sure, for that we will need an other function that will be called when you click the checkbox with cheese. It will also tell the function weather or not it's checked (so it will disable them when you click to check and re-enable them when you click to uncheck it) :

<input onclick="cheeseonly(this.checked);" type="checkbox" name = "size" id="cheese" value = "cheese"> Cheese Only <b />

And the function is :

function cheeseonly(onoff){
		document.getElementById('pepperoni').disabled=onoff;
		document.getElementById('olives').disabled=onoff;
		document.getElementById('sausage').disabled=onoff;
		document.getElementById('peppers').disabled=onoff;
		document.getElementById('onions').disabled=onoff;
		if(onoff==true){
			document.getElementById('pepperoni').checked=false;
			document.getElementById('olives').checked=false;
			document.getElementById('sausage').checked=false;
			document.getElementById('peppers').checked=false;
			document.getElementById('onions').checked=false;
		}
	}

Sorry I didn't see the edit you made in time, check if the way I posted here works as well enough, if you insist to have the alert it's easy to add but you should know alerts are best to be avoided since they usually cause discomfort to your visitors.

jumpinjackflash

darkylord;1233905 wrote:
Sure, for that we will need an other function that will be called when you click the checkbox with cheese. It will also tell the function weather or not it's checked (so it will disable them when you click to check and re-enable them when you click to uncheck it) :
<input onclick="cheeseonly(this.checked);" type="checkbox" name = "size" id="cheese" value = "cheese"> Cheese Only <b />
And the function is :
function cheeseonly(onoff){
		document.getElementById('pepperoni').disabled=onoff;
		document.getElementById('olives').disabled=onoff;
		document.getElementById('sausage').disabled=onoff;
		document.getElementById('peppers').disabled=onoff;
		document.getElementById('onions').disabled=onoff;
		if(onoff==true){
			document.getElementById('pepperoni').checked=false;
			document.getElementById('olives').checked=false;
			document.getElementById('sausage').checked=false;
			document.getElementById('peppers').checked=false;
			document.getElementById('onions').checked=false;
		}
	}
Sorry I didn't see the edit you made in time, check if the way I posted here works as well enough, if you insist to have the alert it's easy to add but you should know alerts are best to be avoided since they usually cause discomfort to your visitors.

Yeah the above code works, but could you show me how to make it so the alert pops up ONLY if there are other checkboxes checked and it also makes them unchecked? I know it is annoying but I wanted to see what it looks like first.

darkylord

Here, with a small change in the cheeseonly function you can have an alert before it disables the rest of them, if any of them was checked :

function cheeseonly(onoff){
		if(onoff==true &&(document.getElementById('pepperoni').checked==onoff || document.getElementById('olives').checked==onoff || document.getElementById('sausage').checked==onoff || document.getElementById('peppers').checked==onoff || document.getElementById('onions').checked==onoff)){
			alert('Other toppings will be disabled.');
		}
		document.getElementById('pepperoni').disabled=onoff;
		document.getElementById('olives').disabled=onoff;
		document.getElementById('sausage').disabled=onoff;
		document.getElementById('peppers').disabled=onoff;
		document.getElementById('onions').disabled=onoff;
		if(onoff==true){
			document.getElementById('pepperoni').checked=false;
			document.getElementById('olives').checked=false;
			document.getElementById('sausage').checked=false;
			document.getElementById('peppers').checked=false;
			document.getElementById('onions').checked=false;
		}
	}

The code above will simply alert them.

The code here uses confirm which will give them the choice to cancel their action :

function cheeseonly(onoff){
		var reply=true;
		if(onoff==true &&(document.getElementById('pepperoni').checked==onoff || document.getElementById('olives').checked==onoff || document.getElementById('sausage').checked==onoff || document.getElementById('peppers').checked==onoff || document.getElementById('onions').checked==onoff)){
			reply=confirm("Other toppings will be disabled.");
		}
		if(reply==true){
			document.getElementById('pepperoni').disabled=onoff;
			document.getElementById('olives').disabled=onoff;
			document.getElementById('sausage').disabled=onoff;
			document.getElementById('peppers').disabled=onoff;
			document.getElementById('onions').disabled=onoff;
			if(onoff==true){
				document.getElementById('pepperoni').checked=false;
				document.getElementById('olives').checked=false;
				document.getElementById('sausage').checked=false;
				document.getElementById('peppers').checked=false;
				document.getElementById('onions').checked=false;
			}
		}else{
			document.getElementById('cheese').checked=false;
		}
	}

jumpinjackflash

darkylord;1233947 wrote:
Here, with a small change in the cheeseonly function you can have an alert before it disables the rest of them, if any of them was checked :
function cheeseonly(onoff){
		if(onoff==true &&(document.getElementById('pepperoni').checked==onoff || document.getElementById('olives').checked==onoff || document.getElementById('sausage').checked==onoff || document.getElementById('peppers').checked==onoff || document.getElementById('onions').checked==onoff)){
			alert('Other toppings will be disabled.');
		}
		document.getElementById('pepperoni').disabled=onoff;
		document.getElementById('olives').disabled=onoff;
		document.getElementById('sausage').disabled=onoff;
		document.getElementById('peppers').disabled=onoff;
		document.getElementById('onions').disabled=onoff;
		if(onoff==true){
			document.getElementById('pepperoni').checked=false;
			document.getElementById('olives').checked=false;
			document.getElementById('sausage').checked=false;
			document.getElementById('peppers').checked=false;
			document.getElementById('onions').checked=false;
		}
	}
The code above will simply alert them.

The code here uses confirm which will give them the choice to cancel their action :
function cheeseonly(onoff){
		var reply=true;
		if(onoff==true &&(document.getElementById('pepperoni').checked==onoff || document.getElementById('olives').checked==onoff || document.getElementById('sausage').checked==onoff || document.getElementById('peppers').checked==onoff || document.getElementById('onions').checked==onoff)){
			reply=confirm("Other toppings will be disabled.");
		}
		if(reply==true){
			document.getElementById('pepperoni').disabled=onoff;
			document.getElementById('olives').disabled=onoff;
			document.getElementById('sausage').disabled=onoff;
			document.getElementById('peppers').disabled=onoff;
			document.getElementById('onions').disabled=onoff;
			if(onoff==true){
				document.getElementById('pepperoni').checked=false;
				document.getElementById('olives').checked=false;
				document.getElementById('sausage').checked=false;
				document.getElementById('peppers').checked=false;
				document.getElementById('onions').checked=false;
			}
		}else{
			document.getElementById('cheese').checked=false;
		}
	}

Yes this works perfect, but only if I select a topping first and THEN select Cheese Only. If I select Cheese Only first and then another topping, it still allows the user to submit the order.

darkylord

No it doesn't. If you select cheese only it disables the rest toppings so they can't be selected. One thing that needs to be fixed now is to restore the disabled toppings when you click reset. That's easy to do based on the rest of the code and hopefully you can do it alone by now. You can use parts of the cheeseonly function that will be placed on the cleanit function. I hope my examples have teach you enough things to manage it and that you aren't just copy pasting them :p

jumpinjackflash

darkylord;1233959 wrote:
No it doesn't. If you select cheese only it disables the rest toppings so they can't be selected. One thing that needs to be fixed now is to restore the disabled toppings when you click reset. That's easy to do based on the rest of the code and hopefully you can do it alone by now. You can use parts of the cheeseonly function that will be placed on the cleanit function. I hope my examples have teach you enough things to manage it and that you aren't just copy pasting them :p

Oh no I am not trying to just copy and paste them. I am just a little behind with HTML. I figured the rest out to be how I wanted it to work. I made it so if the Cheese Only box is checked and another box is checked it will pop up an alert and then uncheck the other boxes, but not disable them. Also if you check the Cheese Only box and no other boxes are checked, then it lets the user hit submit. It works no matter which box is checked first. I believe everything is working now. Thank you so much for helping me. I did learn a lot. Here is my finished code:

<!DOCTYPE html>

<html lang="en">

 <head><title>Pizza Order Form</title>
    <style type="text/css">

   .outp {border-style:solid;background-color:white;
           border-color:red;padding:1em; border-width: .5em;}

	p {margin-left: 15%; width: 65%;}

	textarea {resize : none;}

	form {text-align: center}

	h2 {text-align: center}

</style>
   <script type="text/javascript">

function calculate(){
 var type;
 var newline= "&#13;";
 var sum=0.00;
 var toppings="";

 if( document.getElementById("small").checked==true){
  type="Small Pizza";
  sum+=4.00;
 }
 if( document.getElementById("medium").checked==true){
  type="Medium Pizza";
  sum+=6.00;
 }
 if( document.getElementById("large").checked==true){
  type="Large Pizza";
  sum+=8.00;
 }

 if( document.getElementById("cheese").checked==true){
  toppings="Cheese Only, "
  }

 if( document.getElementById("pepperoni").checked==true){
  toppings=toppings+"Pepperoni, ";
  sum+=0.75;
 }
 if( document.getElementById("olives").checked==true){
  toppings=toppings+"Olives, ";
  sum+=0.60;
 }
 if( document.getElementById("sausage").checked==true){
  toppings=toppings+"Sausage, ";
  sum+=0.75;
 }
 if( document.getElementById("peppers").checked==true){
  toppings=toppings+"Peppers, ";
  sum+=0.50;
 }
 if( document.getElementById("onions").checked==true){
  toppings=toppings+"Onions, ";
  sum+=0.50;
 }

 var length = toppings.length;
 toppings = toppings.slice(0,length-2);

 document.getElementById("opta").innerHTML = type+newline+"Toppings:"+newline+toppings+newline+"Price - $"+sum.toFixed(2);
}

function erase(){
	document.getElementById("opta").innerHTML = "";
}

function checkcheese(){
	if( document.getElementById("cheese").checked==true)
		{
		alert("Can't select cheese and other toppings");
		document.getElementById('pepperoni').checked=false;
		document.getElementById('olives').checked=false;
		document.getElementById('sausage').checked=false;
		document.getElementById('peppers').checked=false;
		document.getElementById('onions').checked=false;
	}
}

function cheeseonly() {
	if (document.getElementById('pepperoni').checked==true || 
		document.getElementById('olives').checked==true || 
		document.getElementById('sausage').checked==true || 
		document.getElementById('peppers').checked==true || 
		document.getElementById('onions').checked==true)
		{
			alert("Can't select cheese and other toppings");
			document.getElementById('cheese').checked=true;
			document.getElementById('pepperoni').checked=false;
			document.getElementById('olives').checked=false;
			document.getElementById('sausage').checked=false;
			document.getElementById('peppers').checked=false;
			document.getElementById('onions').checked=false;
		}
	}


   </script>

 </head>
 <body>

  <h2>Joe's Pizza Palace 
	  <br /> 
	  On-line Order Form
  </h2>

   <form name="wdfor" action="" method="post" >

 <p id = "op" class = "outp" > <b /> Select the size Pizza you want: &nbsp;&nbsp;
    <input type="radio" name = "size" id="small" value = "small" checked> Small - $4.00 <b />
	<input type="radio" name = "size" id="medium" value = "medium"> Medium - $6.00 <b />
	<input type="radio" name = "size" id="large" value = "large"> Large - $8.00 <b />
 </p>

 <p id = "op1" class = "outp" > <b /> Select the toppings: &nbsp;&nbsp;
    <input onclick="checkcheese();" type="checkbox" name = "size" id="pepperoni" value = "pepperoni"> Pepperoni ($0.75) <b />
	<input onclick="checkcheese();" type="checkbox" name = "size" id="olives" value = "olives"> Olives ($0.60) <b />
	<input onclick="checkcheese();" type="checkbox" name = "size" id="sausage" value = "sausage"> Sausage ($0.75) <b /> <br /> 
	<input onclick="checkcheese();" type="checkbox" name = "size" id="peppers" value = "peppers"> Peppers ($0.50) <b />																					   
	<input onclick="checkcheese();" type="checkbox" name = "size" id="onions" value = "onions"> Onions ($0.50) <b />
	<input onclick="cheeseonly();" type="checkbox" name = "size" id="cheese" value = "cheese"> Cheese Only <b />



   <p id="op2" class="outp">
    To obtain the price of your order click on the price button below:

<br /><br />



<input type="button" align = "left" onclick="calculate();" value="Price (Submit Button)"/>

<input type="reset" align = "left" onclick="erase();" value="Clear Form"/>

<br /><br />

<textarea class="outp" id="opta" style="border-color:black;" rows="6" cols="40" onfocus="this.blur()" >
</textarea>

   <br />
   </p>
   </form>


 </body>
</html>