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.
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: <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: <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>
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: <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: <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>
Originally Posted by
darkylord
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: <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: <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>
With this line :
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?
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 :
Ah okay, thank you very much. Let me try it now
*EDIT* nevermind, that was my mistake. Let me try again.
Originally Posted by
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 :
Last edited by jumpinjackflash; 11-11-2012 at 05:15 PM .
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.
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.";
}
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: <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: <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>
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.
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 .
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 2 users browsing this thread. (0 members and 2 guests)
Tags for this Thread
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Reply With Quote
Originally Posted by darkylord
Bookmarks