Funktionieren Radiobuttons nicht mit Labels?

[Neuer]

Hallo zusammen,

ich hab ein Problem im Firefox (im IE tut es) und ich weiß nicht mehr weiter. Ich habe Radio-Buttons und onClick-Events. Wenn ich ein Button klicke, soll etwas in ein anderes Feld geschrieben werden.

Soweit so gut, aber im Firefox springt er mir immer wieder auf das erste Radio-Button-Element. Es scheint also irgend etwas an meinem Code nicht zu stimmen.

Ich habe das Ganze jetzt auf ein Minimum reduziert, bei dem der Effekt immer noch auftritt und herausgefunden, dass es am Label liegt (<label id='FIELD-A'>...</label>). Wenn ich dieses weg lasse dann funktioniert es wie es soll. Ist das Label aber da, dann klappt es nicht.

Kann mir jemand helfen und sagen, ob mein Code falsch ist oder ob das ein Bug im FF ist? Wäre echt klasse, wenn mir das jemand erklären könnte.

  
<script type='text/javascript'>  
	function test(x) { document.getElementById("B").value = x.value; }  
</script>  
  
<label id='FIELD-A'>  
<input id='A' name='A' type='radio' onClick='test(this)' checked='checked' value='1'>1  
<input id='A' name='A' type='radio' onClick='test(this)' value='2'>2  
<input id='A' name='A' type='radio' onClick='test(this)' value='3'>3  
<input id='A' name='A' type='radio' onClick='test(this)' value='4'>4  
</label>  
  
<input id='B' name='B' type='text' value=''>  

Im Voraus vielen Dank für Eure Hilfe,

Anton

[Der Martin]

Hallo,

ich hab ein Problem im Firefox (im IE tut es) und ich weiß nicht mehr weiter. Ich habe Radio-Buttons und onClick-Events. Wenn ich ein Button klicke, soll etwas in ein anderes Feld geschrieben werden.

zumindest das könnte IMHO trotz des fehlerhaften Codes funktionieren.

Soweit so gut, aber im Firefox springt er ...

Wer??

Es scheint also irgend etwas an meinem Code nicht zu stimmen.

Richtig. Das Auffälligste sind mehrfach vergebene IDs. Das Zweit-Auffälligste ist ein label-Element, das gleichzeitig vier Controls zugeordnet ist - das kann nicht sein. Gut möglich, dass dadurch beim Klicken immer das erste Formularelement im label-Element selektiert wird.

Ich habe das Ganze jetzt auf ein Minimum reduziert, bei dem der Effekt immer noch auftritt und herausgefunden, dass es am Label liegt (<label id='FIELD-A'>...</label>). Wenn ich dieses weg lasse dann funktioniert es wie es soll. Ist das Label aber da, dann klappt es nicht.

Das stützt meine obige These.

Ciao,
 Martin

[Neuer]

Hallo Martin,

vielen Dank für die schnelle Antwort. Die gleichen Ids kommen von PHP und sind nicht das Problem.

Mir war nicht klar, dass ein Label immer nur einem Control zugeordnet werden kann. Ich benutze es eigentlich nur um z. B. ggf. die kompletten Radiobuttons auszublenden.

Aber das muss natürlich nicht sein. Ich habe es jetzt auf <span> umgestellt und damit funktioniert es prima.

Vielen Dank für Deine Hilfe.

Gruß,

Anton

Ach ja zu Deiner "Wer??"-Frage: Ich meinte, dass der Cursor wieder auf das erste Element spring und dann einen weiteren onClick-Event ausführt, so dass es so aussieht, als ob nichts passiert ist.

[suit]

vielen Dank für die schnelle Antwort. Die gleichen Ids kommen von PHP und sind nicht das Problem.

Doch, genau die _sind_ das Problem. Ein HTML-Dokument sieht vor, dass eine ID eindeutig ist. Das for-Attribut des label-Elements zielt genau auf eine ID und der Browser verlässt sich drauf, dass diese eindeutig ist. Der Fehlerfall (mehrfache ID) ist nicht näher definiert - was dabei rauskommt, hat Martin aber schon aufgelistet.

Aber das muss natürlich nicht sein. Ich habe es jetzt auf <span> umgestellt und damit funktioniert es prima.

Also beim Essen von Spinat wird ein grünes und bei Tomatensauce ein rotes Hemd angezogen - ggf. ist es aber doch schlauer dem Kind ein Lätzchen umzubinden ...

[Matthias Apsel]

Om nah hoo pez nyeetz, suit!

Also beim Essen von Spinat wird ein grünes und bei Tomatensauce ein rotes Hemd angezogen - ggf. ist es aber doch schlauer dem Kind ein Lätzchen umzubinden ...

Dahamwerswieder: Die Zitatesammlung ist kaputt :-(

Matthias

[Der Martin]

Hallo,

vielen Dank für die schnelle Antwort. Die gleichen Ids kommen von PHP und sind nicht das Problem.
Doch, genau die _sind_ das Problem.

formal auf jeden Fall, aber ich glaube nicht, dass die mehrfachen ID-Werte hier wirklich zum Tragen kommen. Denn hier wurde ja die Variante verwendet, bei der das Control Kindelement des Labels ist:

<label><input /></label>

In dieser Variante ist das for-Attribut beim Label nicht notwendig, demzufolge sind auch die IDs zumindest nutzlos und bewirken möglicherweise gar nichts.

Dass das dennoch ein Fehler ist, steht außer Frage.

Aber das muss natürlich nicht sein. Ich habe es jetzt auf <span> umgestellt und damit funktioniert es prima.
Also beim Essen von Spinat wird ein grünes und bei Tomatensauce ein rotes Hemd angezogen - ggf. ist es aber doch schlauer dem Kind ein Lätzchen umzubinden ...

Ähm ... grübel ... Hä??

So long,
 Martin

[Kai345]

[latex]Mae  govannen![/latex]

<label><input /></label>

In dieser Variante ist das for-Attribut beim Label nicht notwendig,

... außer, man muß/will IE <= 6 noch beachten.

Stur lächeln und winken, Männer!
Kai

[Auge]

Hallo

vielen Dank für die schnelle Antwort. Die gleichen Ids kommen von PHP und sind nicht das Problem.
Doch, genau die _sind_ das Problem.

formal auf jeden Fall, aber ich glaube nicht, dass die mehrfachen ID-Werte hier wirklich zum Tragen kommen.

Logischerweise nicht, denn das Label zielt auf die ID "Field-A", die hier nicht benutzt wird. Das ID-Problem ist hier also tatsächlich nicht Ursache des beobachteten Verhaltens.

Tschö, Auge

[Der Martin]

Hi,

vielen Dank für die schnelle Antwort. Die gleichen Ids kommen von PHP und sind nicht das Problem.
Doch, genau die _sind_ das Problem.
formal auf jeden Fall, aber ich glaube nicht, dass die mehrfachen ID-Werte hier wirklich zum Tragen kommen.
Logischerweise nicht, denn das Label zielt auf die ID "Field-A"

nein, tut es nicht. Es hat *selbst* die ID "Field-A". Fürs Zielen müsste es ein for-Attribut mit einem passenden Wert haben, der einer existierenden ID entspricht. Es hat aber gar kein for-Attribut, also kommt durch diesen Mechanismus keinerlei Verbindung zwischen Label und Control zustande, sondern ausschließlich durch die Eltern-Kind-Beziehung.

Das ID-Problem ist hier also tatsächlich nicht Ursache des beobachteten Verhaltens.

Genau. Aber aus einem anderen Grund, als du annimmst.

So long,
 Martin

[Auge]

Hallo

vielen Dank für die schnelle Antwort. Die gleichen Ids kommen von PHP und sind nicht das Problem.
Doch, genau die _sind_ das Problem.
formal auf jeden Fall, aber ich glaube nicht, dass die mehrfachen ID-Werte hier wirklich zum Tragen kommen.
Logischerweise nicht, denn das Label zielt auf die ID "Field-A"

nein, tut es nicht. Es hat *selbst* die ID "Field-A".

Och nöö, ich geh' wieder in's Bett.

Tschö, Auge

[Klawischnigg]

Hi there,

Also beim Essen von Spinat wird ein grünes und bei Tomatensauce ein rotes Hemd angezogen - ggf. ist es aber doch schlauer dem Kind ein Lätzchen umzubinden ...

Grossartig, ich liebe solche Lösungen!

[Steel]

Moin!

Mir war nicht klar, dass ein Label immer nur einem Control zugeordnet werden kann. Ich benutze es eigentlich nur um z. B. ggf. die kompletten Radiobuttons auszublenden.

Aber das muss natürlich nicht sein. Ich habe es jetzt auf <span> umgestellt und damit funktioniert es prima.

Um hier mal etwas deutlicher zu sprechen als suit:
Was stoert dich an den fuer Formularelemente vorgesehen http://de.selfhtml.org/html/formulare/strukturieren.htm#gruppieren@title=Fieldsets zur Gruppierung?!

Ich weiss, Dokumentationen sind nur dazu da, damit sie niemand liest...

[Gunnar Bittersmann]

@@Neuer:

nuqneH

Ich habe es jetzt auf <span> umgestellt

Lies dir bitte nochmal in SELFHTML durch, wozu http://de.selfhtml.org/html/formulare/strukturieren.htm#label@title='label' gedacht ist. Beachte besonders den letzten Satz der Erläuterung.

Auf 'label' möchte man nicht verzichten, es sei denn, man will die Nutzer seiner Seiten quälen (oder zu Nicht-Nutzern machen).

Qapla'