Optionsfelder + Array-Elemente

Question

Ich habe ein Formular, das dynamisch (mit JS) dupliziert werden kann, damit der Benutzer so viele Daten eingeben kann, wie er möchte. Das funktioniert gut für Texteingaben, weil ich das Attribut name das gleiche lasse (endend mit einem []) und dann, wenn die Werte gepostet werden, gibt es mir einfach ein Array zurück. Jetzt habe ich festgestellt, dass dies nicht so gut für Radio-Buttons funktioniert, weil die Namen eigentlich für jedes Set einzigartig sein müssen. Aber vom Standpunkt der Daten gibt jeder Satz nur einen Wert zurück, so dass das Abrufen der Daten aus den POST-Daten kein Problem darstellt, sondern nur die Funktionalität meines Formulars zerstört. Es gibt keinen Weg, oder? Ich bin nur geschraubt und kann Arrays nicht verwenden?

Answer 1

Ich habe gerade das gleiche Problem gelöst.

Wenn Sie mehr als eine Gruppe von Radiobuttons haben, können Sie immer noch sie in Arrays verwenden:

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

zum Beispiel.

Wenn Sie dieses Formular einreichen, und vorausgesetzt, Sie „a“ und „x“ wählen, werden Sie eine Reihe „Radiobutton“, die

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

Es funktioniert wie

aussieht, weil jede Gruppe hat einen eindeutigen Namen, verwendet aber immer noch die Array-Syntax.

Answer 2

Ja. Aus der Perspektive von HTTP sind sowohl Radiobuttons als auch Checkbox-Sets fast identisch (außer dass die Auswahl eines Radiobuttons alle anderen in der Gruppe deaktiviert).

Sie könnten in der Lage sein, einen Submit-Handler zu haben, der die Eingaben von den Radio-Button-Sets übernimmt und sie in eine Reihe von Standard-Inputs umwandelt, die zu einem Array werden, aber das ist ziemlich hacky. Fügen Sie einfach mehr Code auf dem Server ein, um Ihr eigenes Array zu erstellen, wenn Sie das brauchen.

Answer 3

Es gibt eine Einschränkung zur Verwendung von Arrays in CSS3 und 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"> 

Aber verwenden, um den Label-Tag und für = „“ richtig zu erhalten klickbare Etiketten und für psuedo Klassen ist der Array-Schlüssel sein muß, um arbeiten einzigartig und assoziativ statt numerisch. Tun Sie dies

Andernfalls das Wrapping des Elements mit dem Etikett funktioniert noch, aber das obige ist sauberer und macht es einfacher zu tun. Ein Beispiel CSS, das Etiketten verwendet, um die Elemente ohne Umbruch zu markieren.

/* 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 = "Wahl [1] []" name = "Wahl [2] []"

scheint zu stehen, also, wenn Sie das Hinzufügen mit einer ID dynamisch und es Dingen im Zusammenhang (oder Sie könnten nur vielleicht etwas jedes Mal erhöht), dann können Sie tun:

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

gerade versucht dies auf einigen dynamisch generierte Radiobuttons und PHP $ _POST enthält das für die ‚obligatorisch‘ Radio-Buttons für ThingIDs 6, 10 , 8:

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

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

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