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