4

I stumbled upon an interesting problem today and can't seem to solve it. I have three forms on my site, they all contain the same form fields. I have labels for each input field and would like to focus the text input (or in case of the radio buttons select the associated radio) when the user clicks on the label. This works fine for the first two forms, however the labels do not react to a click in the third form:

Form Number 2 (analogue to form 1 with different IDs, both work perfectly fine):

<label class="label1">Anrede</label>
<input type="radio" name="gender" value="frau" id="2_frau">
<label class="radio-label" for="2_frau">&nbsp;Frau&nbsp;</label>
<input type="radio" name="gender" value="herr" id="2_herr"><label class="radio-label" for="2_herr">&nbsp;Herr&nbsp;</label>
<br>
<label class="label1" for="2_firstname">Vorname</label>
<input type="text" name="firstname" id="2_firstname" placeholder="Vorname&#42;">
<br>
<label class="label1" for="2_lastname">Nachname</label>
<input type="text" name="lastname" id="2_lastname" placeholder="Nachname&#42;">
<br>
<label class="label1" for="2_email">E-Mail-Adresse&#42;</label>
<input type="text" name="email" id="2_email" placeholder="E-Mail-Adresse&#42;" required>

Form Number 3 (no reaction when labels are clicked):

<label class="label1">Anrede</label>
<input type="radio" name="gender" value="frau" id="4_frau">
<label class="radio-label" for="4_frau">&nbsp;Frau&nbsp;</label>
<input type="radio" name="gender" value="herr" id="4_herr">
<label class="radio-label" for="4_herr">&nbsp;Herr&nbsp;</label>
<br>
<label class="label1" for="3_firstname">Vorname</label>
<input type="text" name="firstname" id="3_firstname" placeholder="Vorname&#42;">
<br>
<label class="label1" for="3_lastname">Nachname</label>
<input type="text" name="lastname" id="3_lastname" placeholder="Nachname&#42;">
<br>
<label class="label1" for="3_email">E-Mail-Adresse&#42;</label>
<input type="text" name="email" id="3_email" placeholder="E-Mail-Adresse&#42;" required>

They are both wrapped into <form></form> element. I also compared the two forms and apart from for="" and id="" attributes everything is the same. I also tried wrapping the <input>-elements into the <label>-element, this does not solve the problem either. Problem appears in Chrome and Firefox equally.

Help is much appreciated, thanks!

etoka
  • 41
  • 1
  • 3

1 Answers1

0

Ok, I managed to make it work. I am using the bxslider-Plugin and each form was a slider element wrapped in an unordered list. The label click doesn't seem to work within the last list item, so I simply added a ghost list item in order to fix this. You were right, didn't have to do anything with the part I posted. Thanks!

etoka
  • 41
  • 1
  • 3