Setting a label's for attribute to a DOM element, not an ID in jQuery

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 'f开发者_StackOverflow中文版or' 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

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.

The simplest solution is to move the <input> tags inside the <label> tags and forgo the for attribute altogether. Per the HTML spec, <input> tags without for attributes are implicitly associated with their contents.

Try this:

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

(See: http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1)

You shouldn't have multiple identical ids in the page. It defeats the purpose of the id attribute and is against the W3C spec.

Regardless, jQuery's $(this) could help you in this situation. Say you gave all your the "focusable" class. Then you could do:

$('.focusable').focus( function(){
     $(this).doSomething(); 
});

This is really an HTML question. A label can be associated wtih a form control either by its for attribute having the same value as the associated control's id attribute, or by having the control as a child of the label, e.g.

<form ...>

    <label for="nameField">Name:<input id="nameField" name="nameField" ... ></label>

    <label>email:<input name="emailField" ... ></label>

</form>

I suppose in jQuery you need something like:

var labelAndInput = $('<label>text<input ... ></label>');

or whatever. Note that older versions of IE (and maybe more recent ones too) the label will not be associated with the control without the for attribute (or htmlFor property), there is no other way.