1 Replies - 3403 Views - Last Post: 17 July 2012 - 04:02 AM

#1 JPickerel  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 07-July 12

How do I display this External Javascript Order form.

Posted 07 July 2012 - 10:10 AM

I am new to this site and Javascript I have already made a website and want to display an order form using Javascript. The javascript is an external file for the html page and it will not display the pizza toppings or the checkboxes.
I have looked at the w3's website and cannot find anything too helpful and nothing else on the web is like mine to compare to.I would also like it to display back what has been selected. Thanks in advance for the help.
Here is the html


<!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" xml:lang="en" lang="en"><head>
<title> JP's Order Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">


 
</style>
</head>
<body>

<h1>JP's Pizza Place</h1>
<link rel="stylesheet" type="text/css" href="JP'spizza.css"/>
<img src="Pizza_man.gif" height="200" width="150" alt="JP's Pizza Place" />
<img src="Pizza_man.gif" align="right" height="200" width="150" alt="JP's Pizza Place" />
<a href="images.jpg" ><center><img src="images.jpg" height="114" width="250" alt="pizza slice" /></center></a>
<div id="nav"><p><a href="index.html">Home</a>&nbsp; 
<a href="menu.html">Menu</a>&nbsp;
<a href="appetizers.html">Appetizers</a> &nbsp;
<a href="desserts.html">Desserts</a>&nbsp;
<a href="orderform.html">Order Form</a></p></div>
<div id="content"><br />
</body>
<body>
<h2>Please Place Your Order Below</h2>
<img src="restaraunt1.jpg" align="right" height="300" width="400" alt="JP's Pizza Slice" />

<script src="orderform.js"></script>
<form id="orderForm" novalidate>
<fieldset id ="myFieldSet">
            </fieldset>
			</form>

  
<em><small>Copyright &copy; JP's Pizza Place</small></em> <br />
<a href="mailto:jpickerel@tampabay.rr.com">jpickerel@tampabay.rr.com</a>
</body>
</html>



here is the javascript code.
window.onload = init ;

function init() {
	buildOrderForm();
	var orderForm = document.getElementById("orderForm");
	orderForm.onsubmit = validateForm;
}
function objToppings(toppings,answers) {
	this.toppings = toppings;
	this.answers = answers;
}
function objOrder(title,toppings) {
	this.title = title;
	this.toppings = toppings;
}
function objTopping(topping) {
	this.topping = topping;
}
function objResponse(checked) {
	this.checked = checked;
}
function createOrderObjects() {	
	var toppingsOne= new objTopping("Large"); var toppingsTwo=new objTopping("Medium"); var toppingsThree=new objTopping("Small"); 
	var toppingsFour=new objTopping("Thick Crust"); var toppingsFive= new objTopping("Thin Crust"); var toppingsSix = new objTopping("Handtossed Crust");
	var toppingsSeven= new objTopping("Pepperoni");
    var toppingsEight= new objTopping("Beef");
	var toppingsNine= new objTopping("Ham");
	var toppingsTen= new objTopping("Pork");
	var toppingsEleven= new objTopping("Italian Sausage");
	var toppingsTwelve= new objTopping("Diced Chicken");
	var toppingsThirteen= new objTopping("Wheelchair");
	var toppingsFourteen= new objTopping("Real Bacon Pieces");
	var toppingsFifteen= new objTopping("Green Olives");
	var toppingsSixteen= new objTopping("Black Olives");
	var toppingsSeventeen= new objTopping("Green Peppers");
	var toppingsEighteen= new objTopping("Red Peppers");
	var toppingsNineteen= new objTopping("Yellow Peppers");
	var toppingsTwenty= new objTopping("Sliced Jalopenos");
	var toppingsTwentyone= new objTopping("Bannana Peppers");
	var toppingsTwentytwo= new objTopping("Mushrooms");
	var toppingsTwentythree= new objTopping("Anchovies");
	var toppingsTwentyfour= new objTopping("Pineapple");
	var toppingsTwentyfive= new objTopping("Diced Tomatoes");
	var toppingsTwentysix= new objTopping("Spinach");
	var toppingsTwentyseven= new objTopping("Feta Cheese");
	var toppingsTwentyeight= new objTopping("Cheddar Cheese");

		
	var allToppings = [toppingsOne, toppingsTwo, toppingsThree, toppingsFour, toppingsFive, toppingsSix, toppingsSeven, toppingsEight, toppingsNine, toppingsTen,toppingsEleven,toppingsTwelve,toppingsThirteen,toppingsForteen,toppingsSixteen,toppingsSeventeen,toppingsEighteen,toppingsNineteen,toppingsTwenty,toppingsTwentyone,toppingsTwentytwo,toppingsTwentythree,toppingsTwentyfour,toppingsTwentyfive,toppingsTwentysix,toppingsTwentyseven,toppingsTwentyeight];
	var order = new objOrder("JP's Pizza Order Form", allToppings);
	return order;
}


function buildOrderForm() {
	var orderForm = createOrderObjects() ;
	var legend = document.createElement("legend");
	legend.innerHTML = orderForm.title;
	var fs = document.getElementById("myFieldSet");
	fs.appendChild(legend);
	var div = document.createElement("div");
	div.setAttribute("id", "toppings");
	
	for(var i=0; i< orderForm.toppings.length; i++)
	{
		var p = document.createElement("p");
		p.innerHTML = orderForm.toppings[i]. + "." + orderForm.toppings[i].topping;
		div.appendChild(p);
		
		var ol = document.createElement("ol");
		ol.setAttribute("type", "a");
		div.appendChild(ol);
		
		for (var j=0; j< orderForm.toppings[i].toppings.length; j++)
		{
		
		var li = document.createElement("li");
		ol.appendChild(li);
		
		
		
		var input = document.createElement("input");
		input.setAttribute("type","checkbox");
	
		
		
	}
	
		var submitButton = document.createElement("input");
		submitButton.setAttribute("type","submit");
		submitButton.setAttribute("value","Place Order");
		submitButton.setAttribute("id","submit");
		div.appendChild(submitButton);
		
		fs.appendChild(div);
}



Is This A Good Question/Topic? 0
  • +

Replies To: How do I display this External Javascript Order form.

#2 Astalor  Icon User is offline

  • New D.I.C Head

Reputation: 7
  • View blog
  • Posts: 22
  • Joined: 17-July 12

Re: How do I display this External Javascript Order form.

Posted 17 July 2012 - 04:02 AM

Hello there!

I would suggest you look into using jQuery for this particular problem, it's very simple to do so!

1. Include jQuery with the following script tag..

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


2. Presuming you want to fill myFieldSet with the contents of the external HTML page you could use the following code to do so..

$.get('myExternalHtmlPage.html', function(data) {
	$('#myFieldSet').html(data);
});


I havn't tested the above so I cannot say it will 100% work but I really can't see why it wouldn't. Tell us if you run into any problems and I will be more than happy to help.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1