Javascript Order form help

(2 Pages)
1
2
→

24 Replies - 2632 Views - Last Post: 13 July 2010 - 01:16 PM

#1 sajohnson05

D.I.C Head

Reputation: 0

Posts: 97
Joined: 09-September 09

Javascript Order form help

Posted 10 July 2010 - 11:41 AM

I am trying to create an order form. I have to add items and calculate the total. my issue is i need to get a text box in the last box where the order will come up. Also i need help with the calculate code. Thanks

hw_4.html

<!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: 150px;
	      }
	</style>
   </head> 
   <body>
	<p>
	<h1><center>Joe's Burger Palace<br />On-line Order Form</center></h1>
	</p>

	<p class = "redone">
	<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" id ="submit">Price (Submit Button)</button>	
	<input type = "reset"id ="reset" value="Clear Form"/>
	</p>

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

hw4.js

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 cheest only and other toppings");

else
{
var outpt;
var topping=false
var burger=document.getElementById("size").value

hw4r.js

document.getElementById("subimit").onclick ="calculate;
document.getElementById("reset").onclick=cleanup;

Is This A Good Question/Topic? 0

Replies To: Javascript Order form help

#2 Dormilich

痛覚残留

Reputation: 2894

Posts: 7,543
Joined: 08-June 10

Re: Javascript Order form help

Posted 10 July 2010 - 11:53 AM

change getElementByID to getElementById. Javascript is case sensitive.

Was This Post Helpful? 0

#3 sajohnson05

D.I.C Head

Reputation: 0

Posts: 97
Joined: 09-September 09

Re: Javascript Order form help

Posted 10 July 2010 - 02:12 PM

Thanks i did that and found a few more errors in my words. But it still does not clear my form or give me the alert. Also could someone help me with the calculate function. And i need another box within my last box to put the order in, any help with that would be great.

Dormilich, on 10 July 2010 - 10:53 AM, said:

change getElementByID to getElementById. Javascript is case sensitive.

Was This Post Helpful? 0

#4 Dormilich

痛覚残留

Reputation: 2894

Posts: 7,543
Joined: 08-June 10

Re: Javascript Order form help

Posted 10 July 2010 - 05:00 PM

well, the syntax problems still persist. there are missing brackets, parentheses, case mismatches, etc.

Was This Post Helpful? 0

#5 sajohnson05

D.I.C Head

Reputation: 0

Posts: 97
Joined: 09-September 09

Re: Javascript Order form help

Posted 11 July 2010 - 07:59 AM

here is the updated code. The cleanup function now works but my alert still does not work and can not firgure out why and my black text box still will not go into the final red box. Any help would be great.

<!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;  
	      }

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

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

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

	<script type = "text/javascript" src = "hw4r.js" />
	</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 output();
var topping=false();
var burger=document.getElementById("size").value();

}

}

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

Was This Post Helpful? 0

#6 baavgai

Dreaming Coder

Reputation: 4886

Posts: 11,282
Joined: 16-October 07

Re: Javascript Order form help

Posted 11 July 2010 - 08:39 AM

You're missing a parenthesis, basically: cheese-only and (thing or thing or...)
Also, you're calling your javascript file twice for no reason. You might to better with some arrays and dynamically generating the page.

I tried to clean up the markup a little. Assuming you wanted it that fugly.

 
<html xmlns = "http://www.w3.org/1999/xhtml"> 
<head> 
	<title> Joe's Burger Palace </title>
	<style type = "text/css">
	h1 { text-align: center; }
	div.redone
	     {border-style: solid;
	      border-width: 10px;
	      border-color: red;
	      padding: 10px;
	      text-align: center; 
	      font-size: 15pt;  
	      }
	div.redone p { font-weight: bold; }
	p.blackone
	     {border-color: black;
	      border-style: solid;
	      border-width: 25px;
	      padding: 50px;
	      }
	</style>
	<script type="application/javascript">
		function setCheck(name, value) { document.getElementById(name).checked = value; }
		function getCheck(name) { return document.getElementById(name).checked; }
		
		function cleanUp(){
			setCheck("cheese", false)
			setCheck("onions", false)
			setCheck("lettuce", false)
			setCheck("tomatoes", false)
			setCheck("mustard", false)
			setCheck("cheese_only", false)
			document.getElementById("burgerForm").elements[0].checked=true;//radiobutton
		}

		function calculate(){
			if(
				getCheck("cheese_only")
				&& ( 
					getCheck("cheese")
					|| getCheck("onions")
					|| getCheck("lettuce")
					|| getCheck("tomatoes")
					|| getCheck("mustard")
					)
			) {
				alert("Can't select cheese only and other toppings")
			} else {
				// var output();// wth is this?
				// var topping=false();  // and this?
				var burger=document.getElementById("size").value();
			}

		}

		document.getElementById("submit").onclick = calculate;
		document.getElementById("reset").onclick = cleanUp;
	</script>
</head> 
<body>
	<form action = "">
	<h1>Joe's Burger Palace<br />On-line Order Form</h1>

	<div class = "redone" id ="burgerForm">
		<p>Select the size you want:</p>
		<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">
		<p>Select the toppings:</p>
		<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">
		<p>To obtain the price of your oder click on the price button below:</p>
		<input type = "button" onclick = "calculate();" id = "submit" value = "Price (Submit Button)"/>
		<input type = "reset" onclick= "cleanUp();" id ="reset" value="Clear Form"/>
		<p class ="blackone"><input type="text"></p>
	</div>
	</form>
</body>
</html>

Was This Post Helpful? 1

#7 sajohnson05

D.I.C Head

Reputation: 0

Posts: 97
Joined: 09-September 09

Re: Javascript Order form help

Posted 11 July 2010 - 08:54 AM

baavagi your a life saver first off thank you.

// var output();// wth is this?
50
// var topping=false(); // and this?

These were me starting variable for my calculate function. Could you maybe help me with the first line for being able to add together the items and putting them in the black area?

Thanks

Was This Post Helpful? 0

#8 baavgai

Dreaming Coder

Reputation: 4886

Posts: 11,282
Joined: 16-October 07

Re: Javascript Order form help

Posted 11 July 2010 - 10:00 AM

sajohnson05, on 11 July 2010 - 09:54 AM, said:

// var output();// wth is this?
50
// var topping=false(); // and this?

I mean the syntax of that is wrong, regardless of how you cut it.

The rest of your code? Look and add. e.g.

var total = 0;
if (getCheck("cheese")) { total += 0.5; }
if (getCheck("onions")) { total += 0.25; }

Then you just need to take that value and set the text of your output element.

Was This Post Helpful? 0

#9 sajohnson05

D.I.C Head

Reputation: 0

Posts: 97
Joined: 09-September 09

Re: Javascript Order form help

Posted 11 July 2010 - 05:43 PM

Thanks but i am new how do i got about doing that to my text? Also i need to say in the text box which items are on the burger.

baavgai, on 11 July 2010 - 09:00 AM, said:

sajohnson05, on 11 July 2010 - 09:54 AM, said:

// var output();// wth is this?
50
// var topping=false(); // and this?

I mean the syntax of that is wrong, regardless of how you cut it.

The rest of your code? Look and add. e.g.

var total = 0;
if (getCheck("cheese")) { total += 0.5; }
if (getCheck("onions")) { total += 0.25; }

Then you just need to take that value and set the text of your output element.

Was This Post Helpful? 0

#10 baavgai

Dreaming Coder

Reputation: 4886

Posts: 11,282
Joined: 16-October 07

Re: Javascript Order form help

Posted 12 July 2010 - 04:51 AM

It's really just setting the innerHTML property. To give you an idea, this is how I'd do something similar.

<html xmlns = "http://www.w3.org/1999/xhtml"> 
<head> 
	<title>Paco's Taco Shack</title>
	<script type="application/javascript">
		function TopplingItem(name, price) {
			this.name = name;
			this.price = price;
			return this;
		}
		
		var TopplingList = Array(
			new TopplingItem("Plain", 0),
			new TopplingItem("Cheese", 0.5),
			new TopplingItem("Lettuce", 0),
			new TopplingItem("Tomato", 0.25),
			new TopplingItem("Onions", 0.25),
			new TopplingItem("Cilantro", 0.25),
			new TopplingItem("Pico de gallo", 1)
		);
		
		function cleanUp(){
			for(var i=0; i<TopplingList.length; i++) { 
				document.getElementById('top_'+i).checked = false;
			}
			document.getElementById("results").innerHTML = '';
		}

		function showResults() {
			var total = 0;
			var html = '<table>';
			for(var i=0; i<TopplingList.length; i++) { 
				if (document.getElementById('top_'+i).checked) {
					var item = TopplingList[i];
					html += '<tr>';
					html += '<td>'+ item.name +'</td>';
					html += '<td>'+ item.price.toFixed(2) +'</td>';
					html += '</tr>';
					total += item.price;
				}
			}
			html += '<tr style="border-top: solid 1px black; font-weight:bold"><td>Total</td><td>'+ total.toFixed(2) +'</td></tr>';
			html += '</table>';
			document.getElementById("results").innerHTML = html;
		}
		

		function loadForm() {
			var html = '<table>';
			for(var i=0; i<TopplingList.length; i++) { 
				var item = TopplingList[i];
				html += '<tr>';
				html += '<td><input type="checkbox" id="top_' + i + '" /></td>';
				html += '<td>'+ item.name +'</td>';
				html += '<td>'+ item.price.toFixed(2) +'</td>';
				html += '</tr>';
			}
			html += '</table>';
			html += '<p><input type="button" value="Submit" onclick="showResults();" />';
			html += '<input type="button" value="Reset" onclick="cleanUp();" /></p>';
			document.getElementById("topping").innerHTML = html;
		}
		
	</script>
</head> 
<body>
	<h1>Paco's Taco Shack</h1>
	<h2>Build your taco</h2>
	<div id="topping"></div>
	<div id="results"></div>
	<script type="text/javascript">loadForm();</script>
</body>
</html>

Was This Post Helpful? 0

#11 sajohnson05

D.I.C Head

Reputation: 0

Posts: 97
Joined: 09-September 09

Re: Javascript Order form help

Posted 12 July 2010 - 10:53 AM

Just wanted to say thanks for all you guys help. Went ahead and turned in without have the text from my checkbox and radiobuttons going to my text box. If anyone wants to help me understand why i couldnt figure this out feel free.

Was This Post Helpful? 0

#12 sajohnson05

D.I.C Head

Reputation: 0

Posts: 97
Joined: 09-September 09

Re: Javascript Order form help

Posted 12 July 2010 - 11:53 AM

I have done some updating if someone could take a look a tell me why it still is not working. The reason its in three files is my professor wanted that way.

<!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 = "myForm">
	<p>
	<h1><center>Joe's Burger Palace<br />On-line Order Form</center></h1>
	

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

	<div class = "redone">
	<b>Select the toppings:</b><br /><br />

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

	</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">
	
	<form id = "myTextArea">
	<textarea>
	</textarea>
	
	
	</p>
	</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";
        }
}

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

Was This Post Helpful? 0

#13 Dormilich

痛覚残留

Reputation: 2894

Posts: 7,543
Joined: 08-June 10

Re: Javascript Order form help

Posted 12 July 2010 - 10:52 PM

I would need a live page to tell for sure, but I assume your submit button prevents you from seeing the result. simply because the submit button submits the form, thus whatever result was printed, the whole page gets refreshed and the result disappears.

Was This Post Helpful? 0

#14 sajohnson05

D.I.C Head

Reputation: 0

Posts: 97
Joined: 09-September 09

Re: Javascript Order form help

Posted 13 July 2010 - 05:52 AM

The submit button is just a button and not a submit button. Also i am getting this error" 'myCheckBox.length' is null or not an object" are all my form id's correct.

Was This Post Helpful? 0

#15 Dormilich

痛覚残留

Reputation: 2894

Posts: 7,543
Joined: 08-June 10

Re: Javascript Order form help

Posted 13 July 2010 - 05:58 AM

I would definitely need to have a live page. you omitted the closing form tags, which is not allowed in HTML (i.e. in HTML there are *some* elements, whose end tag you may omit, but <form> is not one of them).

as always, to get predictable Javascript results, validate your HTML.

Was This Post Helpful? 0

(2 Pages)
1
2
→

24 Replies - 2632 Views - Last Post: 13 July 2010 - 01:16 PM

Javascript Order form help

Replies To: Javascript Order form help

Re: Javascript Order form help

Re: Javascript Order form help

Re: Javascript Order form help

Re: Javascript Order form help

Re: Javascript Order form help

Re: Javascript Order form help

Re: Javascript Order form help

Re: Javascript Order form help

Re: Javascript Order form help

Re: Javascript Order form help

Re: Javascript Order form help

Re: Javascript Order form help

Re: Javascript Order form help

Re: Javascript Order form help

Follow & Share

Give It A Try!

Programming

Web Development

Reference Sheets

Bye Bye Ads

Monthly Drawing