JavaScript checkbox submit only one input

Question

I have problem on the checkbox submission. The code is as below:

JavaScript

function init () {
    document.getElementById("pizza").topping[0].checked=true;
    document.getElementById("btn").onclick=poll;
}
onload = init;

function poll () {
    var i, isOK, summary="";
    var form=document.getElementById("pizza");
    for (i=0; i < form.topping.length; i++) {
        if (form.topping[i].checked) {
            summary+=form.topping[i].value+" ";
        }
    }
    isOK = confirm("Submit these choices?\n" + summary);
    if (isOK) {
        form.submit();
    } else {
        return false;
    }
}

HTML

<form id="pizza" action="poll.php" method="POST">
    <div id="panel">Pizza Topping?
        <input type="checkbox" name="topping" value="Cheese">Cheese</input>
        <input type="checkbox" name="topping" value="Ham">Ham</input>
        <input type="checkbox" name="topping" value="Peppers">Peppers</input>
        <input id="btn" type="button" value="Confirm Choices"></input>
    </div>
</form>

poll.php

<?php
    echo "<br>***************<br>";
    var_dump($_POST);
    echo '*********************';
?>

The JS confirm message: Submit these choices? Cheese Peppers

The output of poll.php:

---

array (size=1) 'topping' => string 'Peppers' (length=7)

---

So my problem is: I checked Cheese and Peppers but I only got Peppers submitted. Can anyone help me?

Answer 1

Give an array like name(with the suffix []) to the input elements

<input type="checkbox" name="topping[]" value="Cheese">Cheese</input>
<input type="checkbox" name="topping[]" value="Ham">Ham</input>
<input type="checkbox" name="topping[]" value="Peppers">Peppers</input>