Create an Associative Array for FoodInfo Apply the same method to get the value into the array. Check if the instruction is blank before adding it. Apply a for Loop for the checkboxes. use getElementsByName ("toppings") to learn the lenght of the items in the checkboxes. any one that is checked should be added to foodInfo["topping" + toppings] = toppingBoxes [i].value; For the Radiobutton Applied a conditional statement to check the option checked and add it to the array. Create a new div to display all option selected.
Javascript
<!DOCTYPE html>
<html>
<head>
<!--
JavaScript 6th Edition
Chapter 7
Hands-on Project 7-4
Author:
Date:
Filename: index.htm
-->
<meta charset="utf-8" />
<meta id="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Tutorial 7</title>
<link rel="stylesheet" href="styles.css" />
<script src="modernizr.custom.65897.js"></script>
</head>
<body>
<header>
<h1>
Using Associative Array
</h1>
</header>
<article>
<h2>Pizza Order Form</h2>
<div id="errorMessage"></div>
<form novalidate="novalidate">
<fieldset id="deliveryinfo">
<legend>Delivery Information</legend>
<label for="nameinput">Name</label>
<input type="text" id="nameinput" name="name" required="required" />
<label for="addrinput">Street Address</label>
<input type="text" id="addrinput" name="address" required="required" />
<label for="cityinput">City</label>
<input type="text" id="cityinput" name="city" required="required" />
<label for="emailinput">Email</label>
<input type="email" id="emailinput" name="email" required="required" />
<label for="phoneinput">Phone</label>
<input type="text" id="phoneinput" name="phone" required="required" />
</fieldset>
<fieldset id="orderinfo">
<legend>Order</legend>
<fieldset id="crustbox">
<legend>Crust</legend>
<input type="radio" name="crust" id="thin" value="Thin" />
<label for="thin">Thin Crust</label>
<input type="radio" name="crust" id="thick" value="Deep Dish" />
<label for="thick">Deep Dish</label>
</fieldset>
<fieldset id="sizebox">
<legend>Size</legend>
<select id="size" name="size" required="required">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="XL">Extra Large</option>
</select>
</fieldset>
<fieldset id="toppingbox">
<legend>Topping(s)</legend>
<input type="checkbox" id="pepperoni" name="toppings" value="Pepperoni" />
<label for="pepperoni">Pepperoni</label>
<input type="checkbox" id="sausage" name="toppings" value="Sausage" />
<label for="sausage">Sausage</label>
<input type="checkbox" id="greenpep" name="toppings" value="Green Peppers" />
<label for="greenpep">Green Peppers</label>
<input type="checkbox" id="onion" name="toppings" value="Onions" />
<label for="onion">Onions</label>
<input type="checkbox" id="xcheese" name="toppings" value="Extra Cheese" />
<label for="xcheese">Extra Cheese</label>
<label for="instructions" id="instrlabel">Special Instructions</label>
<textarea id="instructions" name="instructions" rows="3" cols="50" placeholder="special requests, delivery details"></textarea>
</fieldset>
</fieldset>
<fieldset id="previewbutton">
<input type="button" id="previewBtn" value="Preview Order" />
</fieldset>
</form>
<section>
<h2>Order Summary</h2>
<div id="deliverTo">
<h3>Deliver to</h3>
</div>
<div id="order">
<h3>Order</h3>
</div>
</section>
</article>
<script src="script.js"></script>
</body>
</html>
![Create an Associative Array for FoodInfo
Apply the same method to get the value into the array.
Check if the instruction is blank before adding it.
Apply a for Loop for the checkboxes.
use getElementsByName ("toppings") to learn the lenght of the items in the checkboxes.
any one that is checked should be added to foodInfo["topping" + toppings] = toppingBoxes[i].value;
For the Radiobutton
Applied a conditional statement to check the option checked and add it to the array.
Create a new div to display all option selected.](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2Fde1da679-b360-4712-b298-5c18be8f5c44%2F6e7471e3-52a6-4b63-bf11-8b563789d663%2Fmnbqyg_processed.png&w=3840&q=75)
Trending now
This is a popular solution!
Step by step
Solved in 2 steps with 1 images
