list does not came up from checkbox response
I need to create a list of pizza ingredients chosen by the user and then
output it; However when the user chooses the toppings the list does not
come up. I have looped through the checkboxes to check which checkboxes
were checked but when I try to output it comes up blank. I've checked my
code and it seems like there is not a syntax problem.
// make array of all elements with name tops (the checkboxes)
var boxes= document.getElementsByName('tops');
// start a string to hold list of the toppings
// loop through checkboxes to detect checked, append to string, add to cost
for(var i = 0; i< boxes.lenght; i++) {
if(boxes[i].checked) {
top +='<li>' + boxes[i].value + '</li>';
}
}
top +='</ul>';
// make a string for output
var output= username + ' ' +'ordered' +' '+ 'a' +' '+ name +' '+ 'pizza.
</br>';
output += 'toppings' + top;
// display output in tag with id='output'
document.getElementById('output') .innerHTML = output;
// Return false to prevent usual action of submit button
return false;
Here's the Html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>pizza.html</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- pizza.html -->
<form action="" method="post" id="theForm">
<fieldset>
<div><label for="name">Your name</label>
<input type="text" name="name" id="name" required />
</div>
<h4>Pizza Size</h4>
<div><label for="size">Regular $8.00</label>
<input type="radio" name="size" id="regular" value="8.00" />
</div>
<div><label for="size">Large $10.00</label>
<input type="radio" name="size" id="large" value="10.00" />
</div>
<div><label for="size">Family $12.00</label>
<input type="radio" name="size" id="family" value="12.00" />
</div>
<h4>Select toppings (all $0.75 ea.)</h4>
<div><label for="mushrooms">mushrooms</label>
<input type="checkbox" name="tops" value="mushrooms" />
</div>
<div><label for="pepperoni">pepperoni</label>
<input type="checkbox" name="tops" value="pepperoni" />
</div>
<div><label for="peppers">peppers</label>
<input type="checkbox" name="tops" value="peppers" />
</div>
<br />
<div><input type="submit" value="Place Order"></div>
</fieldset>
</form>
<h3 id='output'>Pizza order shows here.</h3>
<script src="js/pizza.js"></script>
</body>
</html>
No comments:
Post a Comment