Radio buttons + array elements

Question

I have a form that can be dynamically duplicated (with JS) so that the user can enter as much data as he wants. This works great for text inputs, because I just leave the name attribute the same (ending with a []) and then when the values are posted, it just returns me an array. Now I just realized that this doesn't work so well for radio buttons, because the names actually need to be unique for each set. But from the data standpoint, each set only returns one value, so retrieving the data from the POST data wouldn't be a problem, it just screws up the functionality of my form. There's no way around this, is there? I'm just screwed and I can't use arrays?

Answer 1

I just solved this same problem.

If you have more than one group of radio buttons, you can still use them in arrays:

<input type="radio" name="radiobutton[0]" value="a"><br>
<input type="radio" name="radiobutton[0]" value="b"><br>
<input type="radio" name="radiobutton[0]" value="c"><br>
<br>
<input type="radio" name="radiobutton[1]" value="x"><br>
<input type="radio" name="radiobutton[1]" value="y"><br>
<input type="radio" name="radiobutton[1]" value="z">

for example.

When you submit that form, and assuming you pick "a" and "x", you will have an array "radiobutton" that looks like

radiobutton[0] = "a";
radiobutton[1] = "x";

It works because each group has a unique name, but still uses the array syntax.

Answer 2

Yeah. From the perspective of HTTP, both radio buttons and checkbox sets are pretty much the same thing (except that selecting a radio button deselects all others in the group).

You might be able to have a submit handler which takes the inputs from the radio button sets and converts them into a bunch of standard inputs that turn into an array, but this is quite hacky. Just put in some more code on the server to build your own array if that's what you need.

Answer 3

There is a caveat to using arrays in CSS3 and HTML5

<input type="radio" name="radiobutton[0]" value="a"><br>
<input type="radio" name="radiobutton[0]" value="b"><br>
<input type="radio" name="radiobutton[0]" value="c"><br>
<br>
<input type="radio" name="radiobutton[1]" value="x"><br>
<input type="radio" name="radiobutton[1]" value="y"><br>
<input type="radio" name="radiobutton[1]" value="z">

But to use the label tag and for="" properly to get clickable labels and for psuedo classes to work the array keys have to be unique and associative rather than numerical. So do this

<label for="a">text</label>
<input type="radio" name="radiobutton[a]" id="a" value="a"><br>
<label for="b">text</label>
<input type="radio" name="radiobutton[b]" id="b" value="b"><br>
<label for="c">text</label>
<input type="radio" name="radiobutton[c]" id="c" value="c"><br>
<br>
<input type="radio" name="radiobutton[x]" id="x" value="x"><br>
<input type="radio" name="radiobutton[y]" id="y" value="y"><br>
<input type="radio" name="radiobutton[z]" id="z" value="z">

Otherwise wrapping the element with the label still works but the above is cleaner and make it easier to do. An example CSS using labels to mark the elements without wrapping.

/* SQUARED Four */
.squaredFour {
height: 30px;
margin: 10px auto;
position: relative;

}

.squaredFour input
{
top: -28px;
left: 0px;
position: relative;
border: 1px solid #999;

}

.squaredFour .element-description
{
display: block;
margin: 0;
position: absolute;
}

.squaredFour label {
cursor: pointer;
position: absolute;
width: 33px;
height: 30px;
top: -40px;
background-color: rgb(200, 242, 163);/*background-color: #c8f2a3;*/
display: block;
color:#111;


}

.squaredFour label span.a{
position: absolute;
height: 4px;
top: 18px;
left: 7px;
background-color: #111;
display: block;
color:#111;
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
width: 10px;

}
.squaredFour label span.b{
position: absolute;
width: 18px;
height: 4px;
top: 14px;
left: 10px;
background-color: #111;
display: block;
color:#111;
-webkit-transform: rotate(128deg);
-moz-transform: rotate(128deg);
-ms-transform: rotate(128deg);
-o-transform: rotate(128deg);
transform: rotate(128deg);

}
.squaredFour label span.c{
position: absolute;
right: 12px;
top:3px;
display: block;
color:#111;
text-wrap: none;

}

.squaredFour input:checked ~ label {
display:block;
background-color: #f16870;
}

.squaredFour input:checked ~ label span.a{
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 21px;
top: 13px;
left: 6px;
}
.squaredFour input:checked ~ label span.b{
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 13px;
left: 6px;
width: 21px;

}   

Answer 4

name="choice[1][]" name="choice[2][]"

Seems to work, so if you're adding dynamically and it's things associated with an ID (or you could just increment something each time maybe) then you can do:

var el = '<input type="radio" name="choice[' + myID + '][] />';

Just tried this on some dynamically-generated radiobuttons and PHP $_POST contains this for the 'mandatory' radio buttons for ThingIDs 6, 10, 8:

[mandatory] => Array
    (
        [6] => Array
            (
                [0] => 1
            )

        [10] => Array
            (
                [0] => 1
            )

        [8] => Array
            (
                [0] => 0
            )
    )