2010-04-11 41 views
13

Mam formularz, który można dynamicznie duplikować (przy użyciu JS), aby użytkownik mógł wprowadzić dowolną ilość danych, zgodnie z własnym życzeniem. Działa to doskonale do wprowadzania tekstu, ponieważ po prostu zostawiam atrybut name tak samo (kończący się na []), a następnie, gdy wartości zostaną opublikowane, po prostu zwrócą mi tablicę. Teraz właśnie zdałem sobie sprawę, że to nie działa tak dobrze dla przycisków radiowych, ponieważ nazwy muszą być unikalne dla każdego zestawu. Ale z punktu widzenia danych, każdy zestaw zwraca tylko jedną wartość, więc pobieranie danych z danych POST nie stanowiłoby problemu, a jedynie podkręcało funkcjonalność mojego formularza. Nie ma sposobu, prawda? Jestem po prostu przykuty i nie mogę używać tablic?Przyciski radiowe + elementy tablicy

Odpowiedz

20

Właśnie rozwiązałem ten sam problem.

Jeśli masz więcej niż jedną grupę przycisków radiowych, nadal można korzystać z nich w tablicach:

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

na przykład.

Po przesłaniu tego formularza, a zakładając, że pick „a” i „X”, trzeba będzie tablicę „RadioButton”, który wygląda jak

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

To działa, ponieważ każda grupa ma unikalną nazwę, ale nadal używa składni tablic.

+1

Arghh ... to takie proste>. mpen

+0

dlaczego nie działa, gdy po prostu wstawiamy [] zamiast [0], [1]. Umieszczenie [] działa dobrze przy wprowadzaniu tekstu, ale nie działa z przyciskami radiowymi. arrgggg – Ataman

+2

@Ataman: ponieważ jeśli masz po prostu 'name =" radiobutton [] "', przeglądarka nie może rozróżnić dwóch różnych grup i zamiast tego sądzi, że wszystkie są częścią jednej grupy o nazwie "radiobutton []" . Potrzebujesz indeksów tablicy, aby jednoznacznie zidentyfikować różne grupy przycisków radiowych. –

3

Tak. Z perspektywy HTTP zarówno przyciski opcji, jak i zestawy pól wyboru to prawie to samo (z wyjątkiem tego, że zaznaczenie przycisku radiowego usuwa zaznaczenie wszystkich pozostałych w grupie).

Możliwe, że będziesz mógł mieć program do przesyłania, który pobiera dane z zestawów przycisków radiowych i konwertuje je na kilka standardowych danych wejściowych, które zmieniają się w tablicę, ale jest to dość hacky. Po prostu dodaj trochę kodu na serwerze, aby zbudować własną tablicę, jeśli tego potrzebujesz.

+0

* westchnienie * Tak ... Domyślam się, że będę musiał to zrobić. Spędziłem godziny, pracując nad tym, aby wszystko inne działało w inny sposób, a następnie spróbowałem dodać do mojego formularza mały przycisk tak/nie, a cała sprawa eksploduje katastrofalnie. – mpen

+0

Jeśli to tylko tak-nie: dlaczego jest to przycisk radiowy? Po prostu zaznacz pole wyboru: – Yuliy

+0

@Yulify: Myślałem o tym, ale nadal nie rozwiązuje problemu. Przeglądarki nie wysyłają wartości w ogóle, jeśli nie są zaznaczone. W związku z tym nie można powiązać formularza, którego odpowiadają pola wyboru. – mpen

0

Jest zastrzeżenie do korzystania z tablic w CSS3 i 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"> 

Jednak aby użyć tagu etykiety i = „” właściwie dostać klikalne etykiet i dla klas psuedo pracować klucze tablicy muszą być unikalny i asocjacyjny, a nie numeryczny. Zrobić to w ten sposób, że w przeciwnym razie zawijanie elementu z etykietą nadal działa, ale powyższe jest czystsze i łatwiejsze do wykonania. Przykładowy CSS z etykietami do oznaczania elementów bez zawijania.

/* 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; 

} 
+0

To nie ma sensu. HTML nie dba o nawiasy kwadratowe, tylko PHP interpretuje je jako "tablice". http://jsfiddle.net/mnpenner/vcysubch/ Działa dobrze z numerycznymi, powtarzającymi się nazwami. Etykiety Atrybut "dla" odpowiada identyfikatorowi wejściowemu, a nie nazwom. – mpen

+0

jest to związane z używaniem pseudo klas i przechwytywaniem zdarzenia kliknięcia za pomocą CSS3 –

+0

Czy możesz zaktualizować swój przykład, aby dołączyć odpowiedni CSS? – mpen

0

name = "wybór [1] []" name = "wybór [2] []"

wydaje się działać, więc jeśli dodajesz dynamicznie i to rzeczy związane z identyfikatorem (lub może po prostu zwiększyć coś za każdym razem może) to można zrobić:

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

prostu próbowałem to na niektórych dynamicznie generowanych radiobuttons i PHP $ _POST zawiera to za „obowiązkowe” przycisków radiowych ThingIDs 6, 10 , 8:

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

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

     [8] => Array 
      (
       [0] => 0 
      ) 
    ) 
Powiązane problemy