Pulsanti di opzione + elementi di array

Question

Ho un modulo che può essere duplicato dinamicamente (con JS) in modo che l'utente possa inserire tutti i dati che desidera. Funziona perfettamente per gli input di testo, perché ho appena lasciato l'attributo name allo stesso modo (finendo con uno []) e poi quando i valori sono stati pubblicati, mi restituisce semplicemente un array. Ora mi sono appena reso conto che questo non funziona molto bene per i pulsanti di scelta, perché i nomi in realtà devono essere unici per ogni set. Ma dal punto di vista dei dati, ogni set restituisce solo un valore, quindi il recupero dei dati dai dati POST non sarebbe un problema, ma solo rovinando la funzionalità del mio modulo. Non c'è modo di aggirare questo, c'è? Sono solo fregato e non posso usare gli array?

Answer 1

Ho appena risolto questo stesso problema.

Se si dispone di più di un gruppo di pulsanti di opzione, è ancora possibile utilizzarli in array:

<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"> 

per esempio.

Quando si invia quella forma, e supponendo che si sceglie "a" e "x", si avrà una matrice "RadioButton" che assomiglia

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

Funziona perché ogni gruppo ha un nome univoco, ma usa ancora la sintassi dell'array.

Answer 2

Sì. Dal punto di vista di HTTP, sia i pulsanti di opzione che i set di caselle di controllo sono praticamente la stessa cosa (eccetto che selezionare un pulsante di opzione deseleziona tutti gli altri nel gruppo).

Potresti essere in grado di avere un gestore di invio che prende gli input dai set di pulsanti di opzione e li converte in un gruppo di input standard che si trasformano in un array, ma questo è abbastanza hacky. Basta inserire un altro codice sul server per creare il proprio array se è quello che ti serve.

Answer 3

C'è un avvertimento per utilizzo di matrici in HTML5 e CSS3

<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"> 

Ma per utilizzare il tag label e per = "" correttamente per ottenere etichette cliccabili e per le classi pseudo a lavorare le chiavi dell'array devono essere unico e associativo piuttosto che numerico. Quindi, fare questo

<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"> 

Altrimenti avvolgere l'elemento con l'etichetta funziona ancora, ma quanto sopra è più pulito e renderlo più facile da fare. Un esempio di CSS che utilizza le etichette per contrassegnare gli elementi senza il 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 = "scelta [1] []" name = "scelta [2] []"

sembra funzionare, quindi se si aggiunge in modo dinamico ed è cose associato ad un ID (o si può solo incrementare qualcosa ogni volta forse) allora si può fare:

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

appena provato questo su alcuni radiobuttons generate dinamicamente e PHP $ _POST contiene questo per i pulsanti di opzione 'obbligatori' per ThingIDs 6, 10 , 8:

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

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

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