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?

In the future, please consider properly formatting your code. — royhowie
– royhowie, Commented Jun 2, 2015 at 3:47
@Alex:I am practicing JavaScript, so I don't have server side code actually. — Hanmelt
– Hanmelt, Commented Jun 2, 2015 at 4:26

Arun P Johny · Accepted Answer · 2015-06-02 03:38:29Z

3

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>

edited Jun 2, 2015 at 3:38

answered Jun 2, 2015 at 3:35

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

5 Comments

user786 Over a year ago

what is "array line name"?

user786 Over a year ago

Can you explain ur code a bit why are you doing topping[]?

Hanmelt Over a year ago

@Arun, thanks for your answer. I tried your code, the line below doesn't work.document.getElementById("pizza").topping[0].checked=true; and the confirm button doesn't work.

Arun P Johny Over a year ago

document.getElementById("pizza")['topping[]'][0].checked=true;

Hanmelt Over a year ago

@Arun: I made a mistake. I did not delete the dot between ("pizza") and ['topping[]'].

Collectives™ on Stack Overflow

JavaScript checkbox submit only one input

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related