Need a little help figuring this one out

JavaScript
1

Hello,

The problem I’m having with this one is in the function, with the FOR I’ve hilited. This is a test pizza ordering application, where I have checkboxes for the different toppings. There are 3 buttons, ( I bet you guys have all seen this at one time or another!), for either Veggie, Meat or Hawaiian, and, depending on which botton is clicked, the appropriate check boxes should be automatically filled in. I have that part working; however, my intention with that FOR is to clear all the checkboxes before the user makes an entry, so that, when they change their mind, the boxes that have previously been checked are first cleared. ( Or, more accurately, ALL the boxes are cleared). Instead, what’s happening is that no matter what choice I make, all the boxes wind up being checked. Can you tell me what’s wrong?

Thanks!,
Jeff S

[FONT=“Courier New”]!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Pizza</title>
<script type = “text/javascript”>
function flip(pizzatype) {
for (var i=0; i<7; i++) {
document.forms[“pizzaform”].toppingcheck[i].checked=“false”; }
if (pizzatype.value==“Veggie Special”) {
document.forms[“pizzaform”].topping.value = “veggies”;
document.forms[“pizzaform”].toppingcheck[3].checked=“checked”;
document.forms[“pizzaform”].toppingcheck[4].checked=“checked”;
document.forms[“pizzaform”].toppingcheck[5].checked=“checked”;
} else if (pizzatype.value==“Meat Special”) {
document.forms[“pizzaform”].topping.value = “meat”;
document.forms[“pizzaform”].toppingcheck[0].checked=“checked”;
document.forms[“pizzaform”].toppingcheck[1].checked=“checked”;
document.forms[“pizzaform”].toppingcheck[2].checked=“checked”;
} else if (pizzatype.value==“Hawaiian”) {
document.forms[“pizzaform”].topping.value = “hampineapple”;
document.forms[“pizzaform”].toppingcheck[6].checked=“checked”;
document.forms[“pizzaform”].toppingcheck[2].checked=“checked”;
}
}

&lt;/script&gt;

</head>
<body>
<form id=“pizzaform” action=“#” onsubmit=“return false;”>
<p>

<input type=“button” name=“veggiespecial” onclick = “flip(veggiespecial)”
value=“Veggie Special” />
<input type=“button” name=“meatspecial” onclick = “flip(meatspecial)”
value=“Meat Special” />
<input type=“button” name=“hawaiian” onclick = “flip(hawaiian)”
value=“Hawaiian” />

</p>
<p>Main Topping: <select name=“topping”>
<option value=“cheese” selected=“selected”>Cheese</option>
<option value=“veggies”>Veggies</option>
<option value=“meat”>Meat</option>
<option value=“hampineapple”>Ham & Pineapples</option>
</select></p>
<p>Toppings</p>
<p>
<input type=“checkbox” id=“topping1” value = “Sausage”
name=“toppingcheck”/>Sausage<br/>
<input type=“checkbox” id=“topping2” value = “Pepperoni”
name=“toppingcheck”/>Pepperoni<br/>
<input type=“checkbox” id=“topping3” value = “Ham”
name=“toppingcheck”/>Ham<br/>
<input type=“checkbox” id=“topping4” value = “Green Peppers”
name=“toppingcheck”/>Green Peppers<br/>
<input type=“checkbox” id=“topping5” value = “Mushrooms”
name=“toppingcheck”/>Mushrooms<br/>
<input type=“checkbox” id=“topping6” value = “Onions”
name=“toppingcheck”/>Onions<br/>
<input type=“checkbox” id=“topping7” value = “Pineapple”
name=“toppingcheck”/>Pineapple<br/>
</p>
</form>
</body>
</html>[/FONT]

2

The string value “false” does not turn off the checkbox.

You need to assign the boolean value of false instead.

3

This works. I have modified some of your script to make use of the name attributes of the form element. Have a close look at the differences between your original script and this one to see what I have done.

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>

<head>
<title>Pizza</title>
<script type=“text/javascript”>
<!–
function flip(pizzatype)
{ // clear all boxes
clearBoxes();
//short cut to form
var myForm=document.pizzaform;
//
if (pizzatype==“veggiespecial”)
{ myForm.topping.value = “veggies”;
myForm.toppingcheck[3].checked=true;
myForm.toppingcheck[4].checked=true;
myForm.toppingcheck[5].checked=true;
}
else if (pizzatype==“meatspecial”)
{ myForm.topping.value = “meat”;
myForm.toppingcheck[0].checked=true;
myForm.toppingcheck[1].checked=true;
myForm.toppingcheck[2].checked=true;
}
else if (pizzatype==“hawaiian”)
{ myForm.topping.value = “hampineapple”;
myForm.toppingcheck[6].checked=true;
myForm.toppingcheck[2].checked=true;
}
}
// ------------
// clears all checked boxes
function clearBoxes()
{ var i;
var boxes=document.pizzaform.toppingcheck;
for(i=0;i<boxes.length;i++)
boxes[i].checked=false;
}
// -----------
//–>
</script>
<style type=“text/css”>
<!–
#topDiv p { margin:0px; }
–>
</style>
</head>

<body>

<form id=“pizzaform” name=“pizzaform” action=“#” onsubmit=“return false;”>
<p>
<input type=“button” name=“veggiespecial” onclick=“flip(‘veggiespecial’)” value=“Veggie Special” />
<input type=“button” name=“meatspecial” onclick=“flip(‘meatspecial’)” value=“Meat Special” />
<input type=“button” name=“hawaiian” onclick=“flip(‘hawaiian’)” value=“Hawaiian” />
</p>
<p>Main Topping: <select name=“topping”>
<option value=“cheese”>Cheese</option>
<option value=“veggies”>Veggies</option>
<option value=“meat”>Meat</option>
<option value=“hampineapple”>Ham & Pineapples</option>
</select></p>
<p>Toppings</p>
<div id=“topDiv”>
<p class=“a”>
<input type=“checkbox” id=“topping1” value=“Sausage” name=“toppingcheck” />Sausage</p>
<p>
<input type=“checkbox” id=“topping2” value=“Pepperoni” name=“toppingcheck” />Pepperoni</p>
<p><input type=“checkbox” id=“topping3” value=“Ham” name=“toppingcheck” />Ham</p>
<p>
<input type=“checkbox” id=“topping4” value=“Green Peppers” name=“toppingcheck” />Green
Peppers</p>
<p>
<input type=“checkbox” id=“topping5” value=“Mushrooms” name=“toppingcheck” />Mushrooms</p>
<p>
<input type=“checkbox” id=“topping6” value=“Onions” name=“toppingcheck” />Onions</p>
<p>
<input type=“checkbox” id=“topping7” value=“Pineapple” name=“toppingcheck” />Pineapple</div>
<!-- end topDiv –>
</form>

</body>

</html>

4

Thanks guys. I appreciate it. It WORKS! Allan, I didn’t change it to the way you suggested; it essentially appeared to be the same thing I was already doing – with the slight exception that you were doing it CORRECTLY! :smiley: But, after making that string a boolean, it worked fine just the way I had it.

Much appreciated!
Jeff

5

I’ll stand up for Allen’s improvements. While they don’t have “getting it working” effect, they instead “get it working well”.

For example, instead of using this mouthful:


document.forms["pizzaform"].toppingcheck[5].checked="checked";
document.forms["pizzaform"].toppingcheck[3].checked="checked";
document.forms["pizzaform"].toppingcheck[4].checked="checked";
document.forms["pizzaform"].toppingcheck[5].checked="checked";

You can store a reference to the toppingcheck, and use that reference instead.


var form = document.getElementById('pizzaform'),
    toppingcheck = form.elements.toppingcheck;

From there, you only need to use toppingcheck instead of document.forms[“pizzaform”].toppingcheck


toppingcheck[3].checked=true;
toppingcheck[4].checked=true;
toppingcheck[5].checked=true;

It’s a small improvement, and the immediate benefit may not be clear until you have made many small improvements, and then come back to it several months later.

6

PHP will see them, but only the last value will be easily accessible. If the OP wants a useful reference, PHP has some good info on how to create arrays in an HTML <form>

7

Thanks all,I’m all for improved code! You guys are getting a little ahead of me on the server side stuff…I’ll try and remember about the for PHP, but I haven’t even started looking at any server-side yet – I’ve done a beginners 500 page HTML/CSS book, and now a little over 1/2 way thru beginners javascript. Then I was thinking I might do another html/css and a little more advanced javascript, or maybe if I can just find some practice javascript apps I can try and write, just to get more comfortable with what I should already know before moving on to server side…