Issues With Javascript Checkboxes

Question

Hi I am having some issues trying to get check box values. For a school project I have a pizza order form and I am suppose to print a summary of he order. I am having issues printing the toppings.

<label><input type = "checkbox" name = "topping" id = "sausage" value = "Sausage"/>  Sausage</label>
<label><input type = "checkbox" name = "topping" id = "pepperoni" value = "Pepperoni"/>  Pepperoni</label>
<label><input type = "checkbox" name = "topping" id = "beef" value = "Beef"/>  Beef</label>
<label><input type = "checkbox" name = "topping" id = "bacon" value = "Bacon"/>  Bacon</label><br />
<label><input type = "checkbox" name = "topping" id = "chicken" value = "Chicken"/>  Chicken</label>
<label><input type = "checkbox" name = "topping" id = "ham" value = "Ham"/>  Ham</label>
<label><input type = "checkbox" name = "topping" id = "olives" value = "Olives"/>  Olives</label>
<label><input type = "checkbox" name = "topping" id = "peppers" value = "Peppers"/>  Peppers</label><br />
<label><input type = "checkbox" name = "topping" id = "tomatoes" value = "Tomatoes"/>  Tomatoes</label>
<label><input type = "checkbox" name = "topping" id = "mushrooms" value = "Mushrooms"/>  Mushrooms</label>
<label><input type = "checkbox" name = "topping" id = "pineapple" value = "Pineapple"/>  Pineapple</label>

Thats the html part and I have my javascript function where I think the problem is.

function toppings(inputCollection) {
    var toppings = "";

    for (var i = 0; i < inputCollection.length; i++) {

        if (inputCollection[i].checked) {
            toppings = toppings + inputCollection[i].value + " ";
        }
    }

    return toppings;
}

I am fairly new to javascript so please don't flame me if I made a stupid mistake. Thank you very much

The JS looks like it should work to me, but I think that for this to actually work you'll need to make the topping-inputs an array by setting their name attributes to toppings[]. Since they're all named topping now only the last(?) will get sent to the server. Not sure if that will help with the JS at all though. — powerbuoy
– powerbuoy, Commented Mar 14, 2012 at 0:32
@powerbuoy: The "[]" suffix convention is only necessary if the form submits to PHP. It's a limitation of PHP; browsers, Javascript, and most servers don't care. — Josh
– Josh, Commented Mar 14, 2012 at 0:35

westo · Accepted Answer · 2012-03-14 00:29:47Z

1

How are you calling your function?

This should do it - toppings(document.getElementsByName("topping"))

answered Mar 14, 2012 at 0:29

westo

5752 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CodyK Over a year ago

I got it figured out. I was assigning it to a variable that was also named toppings. Thanks

Marc · Accepted Answer · 2012-03-14 00:44:03Z

0

Have a look at this example, which also shows how labels are properly used: http://jsbin.com/upeqam

answered Mar 14, 2012 at 0:44

Marc

11.6k2 gold badges40 silver badges48 bronze badges

Collectives™ on Stack Overflow

Issues With Javascript Checkboxes

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related