<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="https://getbootstrap.com/docs/3.4/favicon.ico">
<link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/jumbotron-narrow/">
<title>Luna's Pizza Online Order Form</title>
<!--MAIN CSS-->
<link href="css/style.css" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link href="./index_files/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="./index_files/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./index_files/jumbotron-narrow.css" rel="stylesheet">
<link rel="stylesheet" href="../css/style.css">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="./index_files/ie-emulation-modes-warning.js.download"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="header clearfix">
<h3 class="text-muted">Luna's Pizza</h3>
</div>
<span id="initialSpan"><div class="jumbotron">
<h1>Jumbotron heading</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-lg btn-success" href="https://getbootstrap.com/docs/3.4/examples/jumbotron-narrow/#" role="button">Sign up today</a></p>
</div></span>
<div class="row marketing">
<div class="col-lg-12">
<hr>
<form id="orderPizzaForm" action="" method="post" onSubmit="'#'();">
<span id="deliverySpan">
<h4>Delivery Location</h4>
<label>Name:</label>
<input type="text" name="name" id="deliveryName"><span id="deliveryNameError"></span><br>
<label>Address Type:</label>
<select id="deliveryAddressType" name= "deliveryAddressType">
<option value="selectAddress">--- Please Select ---</option>
<option value ="house">House</option>
<option value ="apartment">Apartment</option>
<option value ="business">Business</option>
<option value="campus">Campus</option>
<option value="hotel">Hotel</option>
<option value="dorm">Dorm</option>
<option value="other">Other</option>
</select><span id="deliveryAddressTypeError"></span><br>
<div id=deliveryOtherAddress>
<label for="nameInput">What type of Address?</label><input type="text" id="nameInput" /><br>
</div>
<label>Street Address:</label>
<input type="text" name="streetAddress" id="deliveryStreetAddress"><span id = "deliveryStreetAddressError"></span><br>
<label>Optional Apartment Number:</label>
<input type="text" name="apartmentNumber"><br>
<label>Suite or Room Number:</label>
<input type="text" name="suiteRoomNumber"><br>
<label>City:</label>
<input type="text" name="city" id="deliveryCity"><span id="deliveryCityError"></span><br>
<label>State:</label>
<input type="text" name="state" id="deliveryState"><span id="deliveryStateError"></span><br>
<label>Zip Code:</label>
<input type="text" name="zipCode" id="deliveryZip"><span id="deliveryZipError"></span><br>
<label>Phone Number:</label>
<input type="tel" name="phonenumber" title="Ex: 555-555-5555" id="deliveryPhoneNumber"><span id="deliveryPhoneNumberError"></span><br>
<label>Email:</label>
<input type="email" name="email" id="deliveryEmail"><span id="deliveryEmailError"></span><br>
<br>
<input type="button" id="verifyDeliveryAddress" value="Submit">
<hr>
</span>
<span id="doughSpan">
<h4>Build Your Order</h4>
<label>Dough Options:</label><br>
<span id="doughOptionsSpan">
<input type="radio" name="doughOptions" value="handTossed" id="handTossed">Hand Tossed<br>
<input type="radio" name="doughOptions" value="thinCrust" id="thinCrust">Thin Crust<br>
<input type="radio" name="doughOptions" value="nyStyle" id="nYStyle">New York Style<br>
<input type="radio" name="doughOptions" value="glutenFree" id="glutenFree">Gluten Free
</span>
<hr>
</span>
<!--BEGIN SPAN FOR PIZZA SIZES-->
<span id="pizzaSizePricesSpan">
<label>Choose your pizza size and price.</label><br>
<select id="pizzaSizePrices" name= "pizzaSizePrices">
<!--<option value="selectSize/Price">--- Please Select Size/Price---</option>-->
</select><span id="pizzaSizePricesError"></span><br>
<hr>
</span>
<!--END SPAN FOR PIZZA SIZES-->
<span id="toppingsSpan"> <!--style="visibility: hidden"-->
<label>Cheese Options:</label>
<select name="cheeseOptions">
<option>Light: no charge</option>
<option>Normal(default): no charge</option>
<option>Extra: +$2.99</option>
<option>Double: +$3.99</option>
</select>
<hr>
<label>Sauce Options:</label>
<select name="sauceOptions">
<option>Regular Tomato: no charge</option>
<option>Hearty Tomato: +$.99</option>
<option>BBQ Sauce: +$1.99</option>
</select>
<hr>
<label>Toppings:</label><br>
<input type="checkbox" name="toppings" id="pepperoni" value="pepperoni"> Pepperoni<br>
<input type="checkbox" name="toppings" id="sausage" value="sausage"> Sausage<br>
<input type="checkbox" name="toppings" id="ham" value="ham"> Ham<br>
<input type="checkbox" name="toppings" id="" value="bacon"> Bacon<br>
<input type="checkbox" name="toppings" id="salami" value="salami"> Salami<br>
<input type="checkbox" name="toppings" id="peppers" value="peppers"> Peppers<br>
<input type="checkbox" name="toppings" id="olives" value="olives"> Olives<br>
<input type="checkbox" name="toppings" id="jalapenos" value="jalapenos"> Jalapenos<br>
<input type="checkbox" name="toppings" id="mushrooms" value="mushrooms"> Mushrooms<br>
<input type="checkbox" name="toppings" id="pineapple" value="pineapple"> Pineapple<br>
<input type="checkbox" name="toppings" id="onion" value="onion"> Onion<br>
<hr>
<input type="button" id="proceedToBilling" value="Proceed to Billing">
</span>
<span id="orderAndBillingSpan">
<h4>Billing Information</h4>
<input type="checkbox" name="sameAsDeliveryInfo" id="sameAs" value="sameAs">
<label>Same as Delivery Information</label><br><br>
<label>Name:</label>
<input type="text" name="name">
<hr>
<label>Address Type:</label>
<select name="addresstype">
<option>House</option>
<option>Apartment</option>
<option>Business</option>
<option>Campus</option>
<option>Hotel</option>
<option>Dorm</option>
<option>Other</option>
</select>
<hr>
<label>Street Address:</label>
<input type="text" name="streetAddress">
<hr>
<label>Optional Apartment Number:</label>
<input type="text" name="apartmentNumber">
<hr>
<label>Suite or Room Number:</label>
<input type="text" name="suiteRoomNumber">
<hr>
<label>City:</label>
<input type="text" name="city">
<hr>
<label>State:</label>
<input type="text" name="state">
<hr>
<label>Zip Code:</label>
<input type="text" name="zipCode">
<hr>
<h4>Payment Information</h4><br>
<label>Credit Card Information:</label>
<input type="text" name="creditCardInfo"><br>
<hr>
<label>CVC Code:</label>
<input type="text" name="cvcCode"><br>
<hr>
<label>Expiration Date:</label>
<select name="expirationDate">
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
<option>2023</option>
</select>
<br>
<button id="submitOrder">Submit Order</button>
</span>
</form>
</div>
</div>
<footer class="footer">
<p>© 2019 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="./index_files/ie10-viewport-bug-workaround.js.download"></script>
<!--MAIN JS-->
<script src="script/script.js"></script>
</body></html>I am trying to add nested objects that's also nested in an array that's all nested within an object literal to a select drop down box. Based on the type of pizza crust a user wants, a select box will programmatically populate the select element with the appropriate sizes that's available and the prices for that type of crust. In my script, I am first clearing the select element, then looping through the object literal, and adding that to select box. While it is populating the select box, I am noticing that sizes and prices are carried over from one type of crust to the next if the user wants to change the type of crust for their pizza. For example, when a user clicks gluten free crust and then changes to a New York Style crust and then back again to gluten free, sizes and prices for the New York style are carried over to the gluten free options. What is going on and how can I fix this?
var $ = function (id) {
"use strict";
return window.document.getElementById(id);
};
var phase;
var phases = {
initialSpan: 0,
deliveryAddress: 1,
crustType: 2,
doughType_Prices_Size: 3,
crustToppings: 4,
billingInfo: 5
};
//DISPLAYING ELEMENTS IN CORRECT PHASES
function updateDisplay() {
"use strict";
var initialSpan = $('initialSpan'),
deliverySpan = $('deliverySpan'),
doughSpan = $('doughSpan'),
pizzaSizePricesSpan = $('pizzaSizePricesSpan'),
toppingsSpan = $('toppingsSpan'),
orderAndBillingSpan = $('orderAndBillingSpan');
if (phase === phases.initialSpan) {
// INITIAL PHASE
initialSpan.style.display = "block";
deliverySpan.style.display = "none";
doughSpan.style.display = "none";
pizzaSizePricesSpan.style.display = "none";
toppingsSpan.style.display = "none";
orderAndBillingSpan.style.display = "none";
} else if (phase === phases.deliveryAddress) {
// DELIVERY ADDRESS
initialSpan.style.display = "none";
deliverySpan.style.display = "block";
doughSpan.style.display = "none";
pizzaSizePricesSpan.style.display = "none";
toppingsSpan.style.display = "none";
orderAndBillingSpan.style.display = "none";
} else if (phase === phases.crustType) {
//CRUST TYPE
deliverySpan.style.display = "none";
doughSpan.style.display = "block";
pizzaSizePricesSpan.style.display = "none";
toppingsSpan.style.display = "none";
orderAndBillingSpan.style.display = "none";
} else if (phase === phases.doughType_Prices_Size) {
//DOUGHTYPE AND SIZES/PRICES
deliverySpan.style.display = "none";
doughSpan.style.display = "block";
pizzaSizePricesSpan.style.display = "block";
toppingsSpan.style.display = "none";
orderAndBillingSpan.style.display = "none";
} else if (phase === phases.crustToppings) {
//CRUST AND TOPPINGS
deliverySpan.style.display = "none";
doughSpan.style.display = "block";
pizzaSizePricesSpan.style.display = "block";
toppingsSpan.style.display = "block";
orderAndBillingSpan.style.display = "none";
} else if (phase === phases.billingInfo) {
//BILLING INFO
deliverySpan.style.display = "none";
doughSpan.style.display = "none";
pizzaSizePricesSpan.style.display = "none";
toppingsSpan.style.display = "none";
orderAndBillingSpan.style.display = "block";
}
}
function nextPhase(currentPhase) {
"use strict";
phase = currentPhase + 1;
updateDisplay();
}
function setPhase(newPhase) {
"use strict";
phase = newPhase;
updateDisplay();
}
var pizzaSizePrices = {
"handTossed": [
{ size: "Small", price: 9.99 },
{ size: "Medium", price: 12.99},
{ size: "large", price: 14.99}
],
"thinCrust": [
{ size: "Medium", price: 11.99},
{ size: "large", price: 13.99}
],
"nyStyle": [
{ size: "Medium", price: 16.99},
{ size: "Extra Large", price: 19.99}
],
"glutenFree": [
{ size: "small", price: 10.99}
]
};
function verifyDoughOption() {
"use strict";
var doughType, s, selection = $('pizzaSizePrices'), sizePrice;
if ($('handTossed').checked) {
doughType = "handTossed";
} else if ($('thinCrust').checked) {
doughType = $('thinCrust').value;
} else if ($('nYStyle').checked) {
doughType = $('nYStyle').value;
} else if ($('glutenFree').checked) {
doughType = $('glutenFree').value;
} else {
doughType = "none";
setPhase(phases.crustType);
return;
}
sizePrice = pizzaSizePrices[doughType];
// Clear selection (select box)
for (var i = 0; i < selection.options.length; i++) {
// CLEAR
selection.options[i] = null;
}
// Loop over sizePrice
for (i = 0; i < sizePrice.length; i++) {
// Build string
s = sizePrice[i].size + " ($" + sizePrice[i].price + ")";
var option = document.createElement('option');
option.text = s;
selection.add(option);
}
// Add to selection
nextPhase(phases.crustType);
}
function init() {
"use strict";
//SETS PHASE FOR INITIAL SPAN
setPhase(phases.initialSpan);
//EVENT FOR INITIAL PHASE
$('initialSpan').addEventListener('click', proceedToOrder);
//EVENT LISTENER FOR OTHER
$('deliveryAddressType').addEventListener("click", otherAddressShowHide);
//EVENT LISTENER FOR DELIVERY SUBMIT BUTTON
$('verifyDeliveryAddress').addEventListener("click", verifyDeliveryAddress);
$('doughOptionsSpan').addEventListener("click", verifyDoughOption);
//EVENT LISTENER FOR DOUGH OPTIONS VALUE
$('pizzaSizePrices').addEventListener("click", verifyPizzaSizePrice);
//EVENT LISTENER FOR PROCEED TO BILLING
$('proceedToBilling').addEventListener("click", proceedToBilling);
//SUBMITS PLACE ORDER
$('orderPizzaForm').onsubmit = placeOrder;
}
window.addEventListener("load", init);<span id="doughOptionsSpan">
<input type="radio" name="doughOptions" value="handTossed" id="handTossed">Hand Tossed<br>
<input type="radio" name="doughOptions" value="thinCrust" id="thinCrust">Thin Crust<br>
<input type="radio" name="doughOptions" value="nyStyle" id="nYStyle">New York Style<br>
<input type="radio" name="doughOptions" value="glutenFree" id="glutenFree">Gluten Free
</span>
<span id="pizzaSizePricesSpan">
<label>Choose your pizza size and price.</label><br>
<select id="pizzaSizePrices" name= "pizzaSizePrices">
</select><span id="pizzaSizePricesError">
</span><br>
</span>You can use the below code to clear the options in the select box. This will solve the problem.
// Clear selection (select box)
selection.options.length = 0;
/* Comment this
for (var i = 0; i < selection.options.length; i++) {
// CLEAR
selection.options[i] = null;
}
*/
var $ = function(id) {
"use strict";
return window.document.getElementById(id);
};
var phase;
var phases = {
initialSpan: 0,
deliveryAddress: 1,
crustType: 2,
doughType_Prices_Size: 3,
crustToppings: 4,
billingInfo: 5
};
//DISPLAYING ELEMENTS IN CORRECT PHASES
function updateDisplay() {
"use strict";
var initialSpan = $('initialSpan'),
deliverySpan = $('deliverySpan'),
doughSpan = $('doughSpan'),
pizzaSizePricesSpan = $('pizzaSizePricesSpan'),
toppingsSpan = $('toppingsSpan'),
orderAndBillingSpan = $('orderAndBillingSpan');
//console.log(initialSpan, //document.getElementById('initialSpan'));
if (phase === phases.initialSpan) {
// INITIAL PHASE
initialSpan.style.display = "block";
deliverySpan.style.display = "none";
//doughSpan.style.display = "none";
//pizzaSizePricesSpan.style.display = "none";
//toppingsSpan.style.display = "none";
//orderAndBillingSpan.style.display = "none";
} else if (phase === phases.deliveryAddress) {
// DELIVERY ADDRESS
initialSpan.style.display = "none";
deliverySpan.style.display = "block";
doughSpan.style.display = "none";
pizzaSizePricesSpan.style.display = "none";
toppingsSpan.style.display = "none";
orderAndBillingSpan.style.display = "none";
} else if (phase === phases.crustType) {
//CRUST TYPE
deliverySpan.style.display = "none";
doughSpan.style.display = "block";
//pizzaSizePricesSpan.style.display = "none";
//toppingsSpan.style.display = "none";
//orderAndBillingSpan.style.display = "none";
} else if (phase === phases.doughType_Prices_Size) {
//DOUGHTYPE AND SIZES/PRICES
deliverySpan.style.display = "none";
doughSpan.style.display = "block";
pizzaSizePricesSpan.style.display = "block";
toppingsSpan.style.display = "none";
orderAndBillingSpan.style.display = "none";
} else if (phase === phases.crustToppings) {
//CRUST AND TOPPINGS
deliverySpan.style.display = "none";
doughSpan.style.display = "block";
pizzaSizePricesSpan.style.display = "block";
toppingsSpan.style.display = "block";
orderAndBillingSpan.style.display = "none";
} else if (phase === phases.billingInfo) {
//BILLING INFO
deliverySpan.style.display = "none";
doughSpan.style.display = "none";
pizzaSizePricesSpan.style.display = "none";
toppingsSpan.style.display = "none";
orderAndBillingSpan.style.display = "block";
}
}
function nextPhase(currentPhase) {
"use strict";
phase = currentPhase + 1;
updateDisplay();
}
function setPhase(newPhase) {
"use strict";
phase = newPhase;
updateDisplay();
}
var pizzaSizePrices = {
"handTossed": [{
size: "Small",
price: 9.99
},
{
size: "Medium",
price: 12.99
},
{
size: "large",
price: 14.99
}
],
"thinCrust": [{
size: "Medium",
price: 11.99
},
{
size: "large",
price: 13.99
}
],
"nyStyle": [{
size: "Medium",
price: 16.99
},
{
size: "Extra Large",
price: 19.99
}
],
"glutenFree": [{
size: "small",
price: 10.99
}]
};
function verifyDoughOption() {
"use strict";
var doughType, s, selection = $('pizzaSizePrices'),
sizePrice;
if ($('handTossed').checked) {
doughType = "handTossed";
} else if ($('thinCrust').checked) {
doughType = $('thinCrust').value;
} else if ($('nYStyle').checked) {
doughType = $('nYStyle').value;
} else if ($('glutenFree').checked) {
doughType = $('glutenFree').value;
} else {
doughType = "none";
setPhase(phases.crustType);
return;
}
sizePrice = pizzaSizePrices[doughType];
// Clear selection (select box)
selection.options.length = 0;
/*
for (var i = 0; i < selection.options.length; i++) {
// CLEAR
//selection.options[i] = null;
selection.remove(i);
}
*/
// Loop over sizePrice
for (let i = 0; i < sizePrice.length; i++) {
// Build string
s = sizePrice[i].size + " ($" + sizePrice[i].price + ")";
var option = document.createElement('option');
option.text = s;
selection.add(option);
}
// Add to selection
nextPhase(phases.crustType);
}
function init() {
"use strict";
//SETS PHASE FOR INITIAL SPAN
setPhase(phases.initialSpan);
//EVENT FOR INITIAL PHASE
//$('initialSpan').addEventListener('click', proceedToOrder);
//EVENT LISTENER FOR OTHER
//$('deliveryAddressType').addEventListener("click", otherAddressShowHide);
//EVENT LISTENER FOR DELIVERY SUBMIT BUTTON
//$('verifyDeliveryAddress').addEventListener("click", verifyDeliveryAddress);
$('doughOptionsSpan').addEventListener("click", verifyDoughOption);
//EVENT LISTENER FOR DOUGH OPTIONS VALUE
//$('pizzaSizePrices').addEventListener("click", verifyPizzaSizePrice);
//EVENT LISTENER FOR PROCEED TO BILLING
$('proceedToBilling').addEventListener("click", proceedToBilling);
//SUBMITS PLACE ORDER
//$('orderPizzaForm').onsubmit = placeOrder;
}
document.addEventListener("DOMContentLoaded", init, false);
//window.document.body.addEventListener("load", init);<body>
<div class="container">
<div class="header clearfix">
<h3 class="text-muted">Luna's Pizza</h3>
</div>
<span id="initialSpan"><div class="jumbotron">
<h1>Jumbotron heading</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-lg btn-success" href="https://getbootstrap.com/docs/3.4/examples/jumbotron-narrow/#" role="button">Sign up today</a></p>
</div></span>
<div class="row marketing">
<div class="col-lg-12">
<hr>
<form id="orderPizzaForm" action="" method="post" onSubmit="'#'();">
<span id="deliverySpan">
<h4>Delivery Location</h4>
<label>Name:</label>
<input type="text" name="name" id="deliveryName"><span id="deliveryNameError"></span><br>
<label>Address Type:</label>
<select id="deliveryAddressType" name= "deliveryAddressType">
<option value="selectAddress">--- Please Select ---</option>
<option value ="house">House</option>
<option value ="apartment">Apartment</option>
<option value ="business">Business</option>
<option value="campus">Campus</option>
<option value="hotel">Hotel</option>
<option value="dorm">Dorm</option>
<option value="other">Other</option>
</select><span id="deliveryAddressTypeError"></span><br>
<div id=deliveryOtherAddress>
<label for="nameInput">What type of Address?</label><input type="text" id="nameInput" /><br>
</div>
<label>Street Address:</label>
<input type="text" name="streetAddress" id="deliveryStreetAddress"><span id = "deliveryStreetAddressError"></span><br>
<label>Optional Apartment Number:</label>
<input type="text" name="apartmentNumber"><br>
<label>Suite or Room Number:</label>
<input type="text" name="suiteRoomNumber"><br>
<label>City:</label>
<input type="text" name="city" id="deliveryCity"><span id="deliveryCityError"></span><br>
<label>State:</label>
<input type="text" name="state" id="deliveryState"><span id="deliveryStateError"></span><br>
<label>Zip Code:</label>
<input type="text" name="zipCode" id="deliveryZip"><span id="deliveryZipError"></span><br>
<label>Phone Number:</label>
<input type="tel" name="phonenumber" title="Ex: 555-555-5555" id="deliveryPhoneNumber"><span id="deliveryPhoneNumberError"></span><br>
<label>Email:</label>
<input type="email" name="email" id="deliveryEmail"><span id="deliveryEmailError"></span><br>
<br>
<input type="button" id="verifyDeliveryAddress" value="Submit">
<hr>
</span>
<span id="doughSpan">
<h4>Build Your Order</h4>
<label>Dough Options:</label><br>
<span id="doughOptionsSpan">
<input type="radio" name="doughOptions" value="handTossed" id="handTossed">Hand Tossed<br>
<input type="radio" name="doughOptions" value="thinCrust" id="thinCrust">Thin Crust<br>
<input type="radio" name="doughOptions" value="nyStyle" id="nYStyle">New York Style<br>
<input type="radio" name="doughOptions" value="glutenFree" id="glutenFree">Gluten Free
</span>
<hr>
</span>
<!--BEGIN SPAN FOR PIZZA SIZES-->
<span id="pizzaSizePricesSpan">
<label>Choose your pizza size and price.</label><br>
<select id="pizzaSizePrices" name= "pizzaSizePrices">
<!--<option value="selectSize/Price">--- Please Select Size/Price---</option>-->
</select><span id="pizzaSizePricesError"></span><br>
<hr>
</span>
<!--END SPAN FOR PIZZA SIZES-->
<span id="toppingsSpan"> <!--style="visibility: hidden"-->
<label>Cheese Options:</label>
<select name="cheeseOptions">
<option>Light: no charge</option>
<option>Normal(default): no charge</option>
<option>Extra: +$2.99</option>
<option>Double: +$3.99</option>
</select>
<hr>
<label>Sauce Options:</label>
<select name="sauceOptions">
<option>Regular Tomato: no charge</option>
<option>Hearty Tomato: +$.99</option>
<option>BBQ Sauce: +$1.99</option>
</select>
<hr>
<label>Toppings:</label><br>
<input type="checkbox" name="toppings" id="pepperoni" value="pepperoni"> Pepperoni<br>
<input type="checkbox" name="toppings" id="sausage" value="sausage"> Sausage<br>
<input type="checkbox" name="toppings" id="ham" value="ham"> Ham<br>
<input type="checkbox" name="toppings" id="" value="bacon"> Bacon<br>
<input type="checkbox" name="toppings" id="salami" value="salami"> Salami<br>
<input type="checkbox" name="toppings" id="peppers" value="peppers"> Peppers<br>
<input type="checkbox" name="toppings" id="olives" value="olives"> Olives<br>
<input type="checkbox" name="toppings" id="jalapenos" value="jalapenos"> Jalapenos<br>
<input type="checkbox" name="toppings" id="mushrooms" value="mushrooms"> Mushrooms<br>
<input type="checkbox" name="toppings" id="pineapple" value="pineapple"> Pineapple<br>
<input type="checkbox" name="toppings" id="onion" value="onion"> Onion<br>
<hr>
<input type="button" id="proceedToBilling" value="Proceed to Billing">
</span>
<span id="orderAndBillingSpan">
<h4>Billing Information</h4>
<input type="checkbox" name="sameAsDeliveryInfo" id="sameAs" value="sameAs">
<label>Same as Delivery Information</label><br><br>
<label>Name:</label>
<input type="text" name="name">
<hr>
<label>Address Type:</label>
<select name="addresstype">
<option>House</option>
<option>Apartment</option>
<option>Business</option>
<option>Campus</option>
<option>Hotel</option>
<option>Dorm</option>
<option>Other</option>
</select>
<hr>
<label>Street Address:</label>
<input type="text" name="streetAddress">
<hr>
<label>Optional Apartment Number:</label>
<input type="text" name="apartmentNumber">
<hr>
<label>Suite or Room Number:</label>
<input type="text" name="suiteRoomNumber">
<hr>
<label>City:</label>
<input type="text" name="city">
<hr>
<label>State:</label>
<input type="text" name="state">
<hr>
<label>Zip Code:</label>
<input type="text" name="zipCode">
<hr>
<h4>Payment Information</h4><br>
<label>Credit Card Information:</label>
<input type="text" name="creditCardInfo"><br>
<hr>
<label>CVC Code:</label>
<input type="text" name="cvcCode"><br>
<hr>
<label>Expiration Date:</label>
<select name="expirationDate">
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
<option>2023</option>
</select>
<br>
<button id="submitOrder">Submit Order</button>
</span>
</form>
</div>
</div>
<footer class="footer">
<p>© 2019 Company, Inc.</p>
</footer>
</div> <!-- /container -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
</body>