Below you will find my three codes. I am trying to make an order form that submits an order and writes the text in the black box. But the black box needs to be within the last red box, not sure why its not going in there. Also my alert and clear do not work yet and can not figure out why. And also if you can just get me started on the calculate function that would be great just one line and i can do the rest i belive. Please help this is my first javascript program.

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml"> 
   <head> 
    <title> Joe's Burger Palace </title>
	<script type = "text/javascript" src = "hw4.js" /> 
	<style type = "text/css">
	p.redone
	     {border-style: solid;
	      border-width: 10px;
	      border-color: red;
	      padding: 10px;
	      text-align: center; 
	      font-size: 15pt;  
	      }

	div.blackone
	     {border-color: black;
	      border-style: solid;
	      border-width: 25px;
	      padding: 50px;
	      }
	</style>
   </head> 
   <body>
	<p>
	<h1><center>Joe's Burger Palace<br />On-line Order Form</center></h1>
	</p>

	<p class = "redone"p id ="burgerForm">
	<b>Select the size you want:</b>
	<br /><br />
	<input type="radio" id ="size" /> Single-$2.00
	<input type="radio" id ="size" /> Double-$3.00
	<input type="radio" id ="size" /> Triple-$4.00
	
	</p>

	<p class = "redone">
	<b>Select the toppings:</b><br /><br />
	
	<input type="checkbox" id = "cheese" />Cheese($0.50)
	<input type="checkbox" id = "onions" />Onions($0.25)
	<input type="checkbox" id = "lettuce" />Lettuce(FREE)<br /><br />
	<input type="checkbox" id = "tomatoes" />Tomatoes($0.30)
	<input type="checkbox" id = "mustard" />Mustard(FREE)
	<input type="checkbox" id = "cheese_only" />Cheese Only($0.40)
	
	</p>

	<p class = "redone">
	
	<b>To obtain the price of your oder click on the price button below:</b><br /><br />
	<button type ="button" onclick="calculate()" id ="submit">Price (Submit Button)</button>	
	<input type = "reset"id ="reset" onclick="cleanUp()"value="Clear Form"/>

	<div class ="blackone">
	<form>
	<input type="text">
	</form>
	</div>
	</p>

	<script type = "text/javascript" src = "hw4r.js" />
   </body>
</html>
function cleanUp()
document.getElementById("cheese").checked=false;
document.getElementById("onions").checked=false;
document.getElementById("lettuce").checked=false;
document.getElementById("tomatoes").checked=false;
document.getElementById("mustard").checked=false;
document.getElementById("cheese_only").checked=false;
document.getElementById("burgerForm").elements[0].checked=true;//radiobutton

function calcuate()
if(document.getElementById("cheese_only").checked && document.getElementById("cheese").checked||document.getElementById("onions").checked
document.getElementById("lettuce").checked||document.getElementById("tomatoes").checked||
document.getElementById("mustard").checked
{
alert("Can't select cheese only and other toppings");

else
{
var outpt;
var topping=false
var burger=document.getElementById("size").value
document.getElementById("subimit").onclick = calculate;
document.getElementById("reset").onclick = cleanUp;

Recommended Answers

All 11 Replies

get me started on the calculate function

The first problem is that function calcuate() is misspelled.

yeah i found that out once i posted

function cleanUp(){
document.getElementById("cheese").checked=false;
document.getElementById("onions").checked=false;
document.getElementById("lettuce").checked=false;
document.getElementById("tomatoes").checked=false;
document.getElementById("mustard").checked=false;
document.getElementById("cheese_only").checked=false;
document.getElementById("burgerForm").elements[0].checked=true;//radiobutton
}

function calculate(){
if(document.getElementById("cheese_only").checked && 
document.getElementById("cheese").checked||
document.getElementById("onions").checked||
document.getElementById("lettuce").checked||
document.getElementById("tomatoes").checked||
document.getElementById("mustard").checked


alert("Can't select cheese only and other toppings");
return false;
{


else


var output();
var topping=false();
var burger=document.getElementById("size").value;

}

now telling me my brackets are not right and alert is an unexpected indentifier

the black box needs to be within the last red box, not sure why its not going in there.

Inline elements (such as <p>) cannot contain other elements.
If you change them all to <div>

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml"> 
   <head> 
    <title> Joe's Burger Palace </title>
	<script type = "text/javascript" src = "hw4.js" /> 
	<style type = "text/css">
	div.redone
	     {border-style: solid;
	      border-width: 10px;
	      border-color: red;
	      padding: 10px;
	      text-align: center; 
	      font-size: 15pt;  
	      }

	div.blackone
	     {border-color: black;
	      border-style: solid;
	      border-width: 25px;
	      padding: 50px;
	      }
	</style>
   </head> 
   <body>
	<p>
	<h1><center>Joe's Burger Palace<br />On-line Order Form</center></h1>
	</p>

	<div class = "redone"p id ="burgerForm">
	<b>Select the size you want:</b>
	<br /><br />
	<input type="radio" id ="size" /> Single-$2.00
	<input type="radio" id ="size" /> Double-$3.00
	<input type="radio" id ="size" /> Triple-$4.00
	
	</div>

	<div class = "redone">
	<b>Select the toppings:</b><br /><br />
	
	<input type="checkbox" id = "cheese" />Cheese($0.50)
	<input type="checkbox" id = "onions" />Onions($0.25)
	<input type="checkbox" id = "lettuce" />Lettuce(FREE)<br /><br />
	<input type="checkbox" id = "tomatoes" />Tomatoes($0.30)
	<input type="checkbox" id = "mustard" />Mustard(FREE)
	<input type="checkbox" id = "cheese_only" />Cheese Only($0.40)
	
	</div>

	<div class = "redone">
	
	<b>To obtain the price of your oder click on the price button below:</b><br /><br />
	<button type ="button" onclick="calculate()" id ="submit">Price (Submit Button)</button>	
	<input type = "reset"id ="reset" onclick="cleanUp()"value="Clear Form"/>

	<div class ="blackone">
	<form>
	<input type="text">
	</form>
	</div>


	</div>

	<script type = "text/javascript">
document.getElementById("subimit").onclick = calculate;
document.getElementById("reset").onclick = cleanUp;

function cleanUp()
document.getElementById("cheese").checked=false;
document.getElementById("onions").checked=false;
document.getElementById("lettuce").checked=false;
document.getElementById("tomatoes").checked=false;
document.getElementById("mustard").checked=false;
document.getElementById("cheese_only").checked=false;
document.getElementById("burgerForm").elements[0].checked=true;//radiobutton

function calculate(){}
/*
if(document.getElementById("cheese_only").checked && document.getElementById("cheese").checked||document.getElementById("onions").checked
document.getElementById("lettuce").checked||document.getElementById("tomatoes").checked||
document.getElementById("mustard").checked
{
alert("Can't select cheese only and other toppings");

else
{
var outpt;
var topping=false
var burger=document.getElementById("size").value
*/
   </body>
</html>

you can then put the 'black' <div> inside the red one.

now telling me my brackets are not right

Which is true, of course.

You will never see the end of messages like that if you try to build humongous, multi-line tests or statements 'freehand' - especially when a project is in the first draft.

Once you have simple versions

if (.checked)
   if (.checked && .checked)

working correctly, you could pile on complexity

if (.checked && (.checked || .checked || .checked))

to your heart's content. But heaven help anyone who has to maintain code like that. Remember: it might even be you - years after you have forgotten what the code was intended to do.

Of course you don't have to pay attention to any of that if you aren't planning a career in programming :)

Below is my updated code. I have everything working except getting the price and items in the black text box any help would be great.

function cleanUp(){
document.getElementById("cheese").checked=false;
document.getElementById("onions").checked=false;
document.getElementById("lettuce").checked=false;
document.getElementById("tomatoes").checked=false;
document.getElementById("mustard").checked=false;
document.getElementById("cheese_only").checked=false;
document.getElementById("burgerForm").elements[0].checked=true;//radiobutton
}

function calculate(){

if(
document.getElementById("cheese_only").checked && (
document.getElementById("cheese").checked||
document.getElementById("onions").checked||
document.getElementById("lettuce").checked||
document.getElementById("tomatoes").checked||
document.getElementById("mustard").checked)
){

alert("Can't select cheese only and other toppings");
} else {

var total = 0;
var burger=document.getElementById("size").value();
if (document.getElementById("cheese").checked){total += 0.50;}
if (document.getElementById("cheese_only").checked){total += 0.40;}
if (document.getElementById("onions").checked){total += 0.25;}
if (document.getElementById("tomatoes").checked){total += 0.30;}
if (document.getElementById("burgerForm").element[0]){total += 2.00;}
if (document.getElementById("burgerForm").element[1]){total += 3.00;}
if (document.getElementById("burgerForm").element[2]){total += 4.00;}

}
}
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml"> 
   <head> 
    <title> Joe's Burger Palace </title>
	<script type = "text/javascript" src = "hw4.js" >
	</script> 
	<style type = "text/css">
	div.redone
	     {border-style: solid;
	      border-width: 10px;
	      border-color: red;
	      padding: 10px;
	      text-align: center; 
	      font-size: 15pt;  
	      }

	p.blackone
	     {border-color: black;
	      border-style: solid;
	      border-width: 25px;
	      padding: 50px;
	      }
	</style>
   </head> 
   <body>
	<form action = "">
	<p>
	<h1><center>Joe's Burger Palace<br />On-line Order Form</center></h1>
	

	<div class = "redone"p id ="burgerForm">
	<b>Select the size you want:</b>
	<br /><br />
	<input type="radio" id ="sizeS" /> Single-$2.00
	<input type="radio" id ="sizeD" /> Double-$3.00
	<input type="radio" id ="sizeT" /> Triple-$4.00
	
	</div><br />

	<div class = "redone">
	<b>Select the toppings:</b><br /><br />
	
	<input type="checkbox" id = "cheese" />Cheese($0.50)
	<input type="checkbox" id = "onions" />Onions($0.25)
	<input type="checkbox" id = "lettuce" />Lettuce(FREE)<br /><br />
	<input type="checkbox" id = "tomatoes" />Tomatoes($0.30)
	<input type="checkbox" id = "mustard" />Mustard(FREE)
	<input type="checkbox" id = "cheese_only" />Cheese Only($0.40)
	
	</div><br />

	<div class = "redone">
	
	<b>To obtain the price of your order click on the price button below:</b><br /><br />

	<input type = "button" onclick = "calculate();" id = "submit" value = "Price (Submit Button)"/>
	
	<input type = "reset" onclick= "cleanUp();" id ="reset" value="Clear Form"/>

	<p class ="blackone">
	
	<textarea >
	</textarea>
	
	</p>
	</div>
	

	<script type = "text/javascript" src = "hw4r.js">
	</script>
	</form>

   </body>
</html>

Any help would be great.

Thanks

Hey sajohnson05,

First, you have an additional "p" in you div declaration after the "redone"

<div class = "redone"p id ="burgerForm">

Second, give your form a name. Let's say

<form name="burger_order" action = "">

. Then give your textarea a name - "total_order"

<textarea name="total_order">

.
In your functions file, remove the burger variable from the calculate() function, it refers to a non existing object - "size". You have only "sizeS", "sizeD", "sizeT". Then, change your checks for the burger size to the following:

if (document.getElementById("sizeS").checked){total += 2.00;}
if (document.getElementById("sizeD").checked){total += 3.00;}
if (document.getElementById("sizeT").checked){total += 4.00;}

document.burger_order.total_order.value = total;

This will do the trick.

In general, it's a better practice to give the radio buttons values so that on selection you use the value of the selection and not entering a value by hand as above. Use

document.getElementById("selection1").value

Cheers

I am now getting this message 'document.burgerOrder.totalOrder' is null or not an object

I would guess you have a typo somewhere in the code. Post the code here and I'll take a look.

<!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>
<title>Joe's Burger Palace</title>

<script type="text/javascript" src="hw4.js">
</script>

<style type="text/css">
        div.redone
             {border-style: solid;
              border-width: 10px;
              border-color: red;
              padding: 10px;
              text-align: center; 
              font-size: 15pt;  
              }
        p.blackone
             {border-color: black;
              border-style: solid;
              border-width: 25px;
              padding: 50px;
              }
 	div.c1 {text-align: center}
</style>
</head>

<body>
<form name="burgerOrder" action= " " id="myForm" >


<div class="c1">
	<h1>Joe's Burger Palace<br />
	On-line Order Form</h1>
</div>


<div class="redone">
	<strong>Select the size you want:</strong>
		<br /><br />
	<form  action ="" id="burgerForm">
	<input type="radio" name ="burger" id="sizeS" value="$2.00" checked="checked" /> Single-$2.00 
	<input type="radio" name ="burger" id="sizeD" value="$3.00" /> Double-$3.00 
	<input type="radio" name ="burger" id="sizeT" value="$4.00" /> Triple-$4.00
</form>
</div>
		<br />

<div class="redone">
	<strong>Select the toppings:</strong>
		<br /><br />
	<form action = " " id="myCheckBox">
	<input type="checkbox" id="cheese" value=".50" />Cheese($0.50) 
	<input type="checkbox" id="onions" value=".25" />Onions($0.25) 
	<input type="checkbox" id="lettuce" value=".00" />Lettuce(FREE)
		<br /><br />
	<input type="checkbox" id="tomatoes" value=".30" />Tomatoes($0.30) 
	<input type="checkbox" id="mustard" value=".00" />Mustard(FREE) 
	<input type="checkbox" id="cheese_only" value=".40" />Cheese Only($0.40)
	</form>
</div>
		<br />

<div class="redone">
	<strong>To obtain the price of your order click on the price button below:</strong>
		<br /><br />
	<form action = " "id="myTextArea">
	<input type="button" onclick="calculate();" id="submit" value="Price (Submit Button)" /> 
	<input type="reset" onclick="cleanUp();" id="reset" value="Clear Form" />
		
	<p class="blackone">
		<textarea name = "totalOrder" rows ="5" cols ="50">
		</textarea>
	</p>	
	</form>	
</div>

<script type="text/javascript" src="hw4r.js">
</script>

</form>
</body>
</html>
function cleanUp(){
document.getElementById("cheese").checked=false;
document.getElementById("onions").checked=false;
document.getElementById("lettuce").checked=false;
document.getElementById("tomatoes").checked=false;
document.getElementById("mustard").checked=false;
document.getElementById("cheese_only").checked=false;
document.getElementById("burgerForm").elements[0].checked=true;//radiobutton
}

function calculate(){

if(
document.getElementById("cheese_only").checked && (
document.getElementById("cheese").checked||
document.getElementById("onions").checked||
document.getElementById("lettuce").checked||
document.getElementById("tomatoes").checked||
document.getElementById("mustard").checked)
){

alert("Can't select cheese only and other toppings");
} else {

//var dom = document.getElementById("myForm");
//for (var i=0;i<dom.myCheckBox.length;i++)
//{
//       if (dom.myCheckBox[i].checked)
//        {
  //             dom.myTextArea.value += dom.myCheckBox[i].value + "\n";
    //    }
//}
var total = 0;

if (document.getElementById("cheese").checked){total += 0.50;}
if (document.getElementById("cheese_only").checked){total += 0.40;}
if (document.getElementById("onions").checked){total += 0.25;}
if (document.getElementById("tomatoes").checked){total += 0.30;}
if (document.getElementById("sizeS").checked){total += 2.00;}
if (document.getElementById("sizeD").checked){total += 3.00;}
if (document.getElementById("sizeT").checked){total += 4.00;}
document.burgerOrder.totalOrder.value=total;

}
}
document.getElementById("submit").onclick = calculate;
document.getElementById("reset").onclick = cleanUp;

You enclosed the textarea named "totalOrder" in another <form> which wasn't there in your previous post, and you haven't given this form a name. Each form is a unique element in document.elements[] thus you have to name your new form, let's say "textTotal" and refer to this object as

document.textTotal.totalOrder.value = total;

instead of

document.burgerOrder.totalOrder.value = total;

since totalOrder is no longer an object of the "burgerOrder" form.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.