Neuer: Funktionieren Radiobuttons nicht mit Labels?

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

  1. 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

    --
    F: Was sagt der große Keks zum kleinen Keks?
    A: Du kannst dich jetzt verkrümeln.
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    1. 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.

      1. 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 ...

        1. 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

          --
          1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif
        2. 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

          --
          Lieber eine Stumme im Bett, als eine Taube auf dem Dach.
          Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
          1. [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

            --
            Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken
            in Richtung "Mess up the Web".(suit)
            SelfHTML-Forum-Stylesheet
          2. 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

            --
            Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
            Terry Pratchett, "Wachen! Wachen!"
            ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
            Veranstaltungsdatenbank Vdb 0.3
            1. 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

              --
              Viele Fachleute vertreten die Ansicht, jedes Feature eines Programms, das sich nicht auf Wunsch abstellen lässt, sei ein Bug.
              Außer bei Microsoft. Da ist es umgekehrt.
              Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
              1. 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

                --
                Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
                Terry Pratchett, "Wachen! Wachen!"
                ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
                Veranstaltungsdatenbank Vdb 0.3
        3. 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!

      2. 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...

        --
        Vergesst Chuck Norris.
        Sponge Bob kann unter Wasser grillen!
      3. @@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'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)