Question

Short Question:
How do you link a label element to an input element without using the input element’s id using jQuery and javascript?

Long Question:
I am using jQuery to clone a form with possibly more than one instance of the form being available for the user to fill in.

A label’s ‘for’ attribute is supposed to be set to the ‘id’ attribute of the input element that it is for. This works when the input element has a unique id.

Because I am cloning the same input element there will be multiple input elements with the same id in the document. Therefore I’m avoiding having id attributes for input elements but I’d still like to focus on the input element when the label is clicked. I also want to avoid generating random ids for fields or setting onclick events on labels.

Edit #1

Example mark up (note no ids)

<form>    
<label>First Name:</label><input type='text' name='FirstName' /><br/>
<label>Last Name:</label><input type='text' name='LastName' /><br/>
</form>

Example cloning code:

var newForm = $('form').clone();

$(newForm).find('label').each(function(){
   var inputElement = $(this).next('input');

   // I'd love to set the label's for attribute to an element
   $(this).attr('for', inputElement);

});

$(document).append(newForm);

Edit #2

There currently are three options:

• Set onclick events for labels to focus on the input field they’re for. Criteria for deciding which labels are for which inputs can be the next input element or something else
• Embed the input fields in the label fields (might not be possible due to designer’s choices)
• Generate random ids while cloning each form

Answer 1

Well it would be nice to see the markup, but if i can assume that the markup will look somewhat like this

<form name="f1">
<label>this is my label</label>
<input />
<label>this is my other label</label>
<input />
</form>

<form name="f2">
<label>this is my label</label>
<input />
<label>this is my other label</label>
<input />
</form>

then you could do something like this

$('form label').live('click',function(){
  $(this).next('input').focus();
});

you will need to use live or delegate since you’re cloning the forms on the fly i’m assuming.