www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 22

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

  1. #1
    Join Date
    Nov 2012
    Posts
    12

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

    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>

  2. #2
    Join Date
    Nov 2012
    Posts
    24
    The whole job can be done with javascript like this :
    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">
        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>

  3. #3
    Join Date
    Nov 2012
    Posts
    12
    Quote Originally Posted by darkylord View Post
    The whole job can be done with javascript like this :
    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">
        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?

  4. #4
    Join Date
    Nov 2012
    Posts
    24
    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.

  5. #5
    Join Date
    Nov 2012
    Posts
    12
    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?

  6. #6
    Join Date
    Nov 2012
    Posts
    24
    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.

  7. #7
    Join Date
    Nov 2012
    Posts
    12
    Ah okay, thank you very much. Let me try it now

  8. #8
    Join Date
    Nov 2012
    Posts
    12
    *EDIT* nevermind, that was my mistake. Let me try again.

  9. #9
    Join Date
    Nov 2012
    Posts
    12
    Quote Originally Posted by darkylord View Post
    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!
    Last edited by jumpinjackflash; 11-11-2012 at 05:15 PM.

  10. #10
    Join Date
    Nov 2012
    Posts
    12
    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.

  11. #11
    Join Date
    Nov 2012
    Posts
    24
    Add an event listener to the button which will call a function clear() like the code below :
    HTML Code:
    <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 "") :
    Code:
    function clear(){
    		document.getElementById("opta").innerHTML = "Text area for submitted info.";
        }

  12. #12
    Join Date
    Nov 2012
    Posts
    12
    This is what I have total and it still isn't clearing the text area:

    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">
       
        function calculate(){
         var type;
         var newline= "
";
    	 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>

  13. #13
    Join Date
    Nov 2012
    Posts
    24
    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.

  14. #14
    Join Date
    Nov 2012
    Posts
    12
    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?
    Last edited by jumpinjackflash; 11-11-2012 at 07:06 PM.

  15. #15
    Join Date
    Nov 2012
    Posts
    24
    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) :
    HTML Code:
    <input onclick="cheeseonly(this.checked);" type="checkbox" name = "size" id="cheese" value = "cheese"> Cheese Only <b />
    And the function is :
    Code:
    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.
    Last edited by darkylord; 11-11-2012 at 07:15 PM.

Thread Information

Users Browsing this Thread

There are currently 4 users browsing this thread. (0 members and 4 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles