jQuery plugin to associate label “for” attribute with form controls that have dynamic id’s

Posted on 2011.06.30 by Alan

For whatever reason, you can’t associate your labels with your form controls implicitly by wrapping both the label text and the control in a <label> element:

<label>
  Email address: <input type="email" name="email" value="" placeholder="you@example.com"/>
</label>

You’ve had to explicitly state the form control you want the label to be associated with:

<label for="email">Email address:</label>
<input id="email" type="email" name="email" value="" placeholder="you@example.com"/>

…but your framework has other ideas, it decides to commandeer your precious “id” attribute and change it from a simple and beautiful “email” into a junky “dnn_ctr1163_RegistrationForm_email”. *cough* DotNetNuke *cough*, but also *cough* Wicket *cough* and probably a whole load of others.

The problem is now that your label is no longer associated with your form control, and there isn’t a simple fix, like, for example, change the for attribute to read “dnn_ctr1163_RegistrationForm_email”, because the numbers in the id change each time you refresh the page. The ID is dynamic, and you are receiving accessibility black stars.

So, luckily I noticed that often the id will change, but the framework will leave your originally intended id somewhere in there. I’ve written a jQuery plugin to look at label for attributes and try to find the form control you intended to associate it with before your server side framework so rudely changed it.

How to use

Download the plugin and add it to your page
Select the labels you want to re-associate and call the function eg. $(‘label’).fuzzyFor();

TODO

The plugin finds matches by looking for input, select and textarea elements in the document and checking to see if the for attribute in your label element appears in the id attribute of the form control. At the moment if more than one match is found, it just uses the first (which is probably good enough for most). However, it should probably do something a bit more clever and use the form control that is closest to the label (I’m reasoning that you normally put your label’s close to your controls).

1,636 thoughts on “jQuery plugin to associate label “for” attribute with form controls that have dynamic id’s”

KennethBum on 2025.12.16 at 17:30 said:

Umass India Pharm: Umass India Pharm – Umass India Pharm
Josephvax on 2025.12.16 at 17:52 said:

Umass India Pharm: Umass India Pharm – п»їlegitimate online pharmacies india
MichaelTet on 2025.12.16 at 20:27 said:

https://unmpharm.com/# Unm Pharm
DelmarInoro on 2025.12.16 at 22:09 said:

https://nyupharm.com/# ed meds online canada
KennethBum on 2025.12.16 at 22:25 said:

buy prescription drugs from india: Umass India Pharm – world pharmacy india
Josephvax on 2025.12.16 at 22:51 said:

canadian medications: Nyu Pharm – canadian pharmacy victoza
CraigLed on 2025.12.16 at 23:05 said:

indian pharmacies safe Online medicine home delivery Online medicine order
MichaelTet on 2025.12.17 at 1:00 said:

http://unmpharm.com/# Unm Pharm
KennethBum on 2025.12.17 at 3:18 said:

Unm Pharm: mexico pharmacies prescription drugs – reputable mexican pharmacies online
Josephvax on 2025.12.17 at 3:50 said:

Unm Pharm: Unm Pharm – semaglutide mexico price
MichaelTet on 2025.12.17 at 5:34 said:

https://unmpharm.com/# gabapentin mexican pharmacy
DelmarInoro on 2025.12.17 at 7:50 said:

https://unmpharm.com/# mexico drug stores pharmacies
KennethBum on 2025.12.17 at 8:17 said:

trustworthy canadian pharmacy: canada drugs reviews – canadianpharmacyworld
CraigLed on 2025.12.17 at 8:24 said:

Unm Pharm Unm Pharm Unm Pharm
Josephvax on 2025.12.17 at 9:02 said:

pharmacy website india: Umass India Pharm – Umass India Pharm
MichaelTet on 2025.12.17 at 10:57 said:

https://umassindiapharm.xyz/# indian pharmacy
KennethBum on 2025.12.17 at 14:54 said:

india pharmacy mail order: best online pharmacy india – Umass India Pharm
CraigLed on 2025.12.17 at 15:07 said:

online mexico pharmacy USA legit mexican pharmacy for hair loss pills Unm Pharm
Josephvax on 2025.12.17 at 15:42 said:

Unm Pharm: buy antibiotics over the counter in mexico – buy kamagra oral jelly mexico
MichaelTet on 2025.12.17 at 17:34 said:

https://umassindiapharm.xyz/# indian pharmacies safe
KennethBum on 2025.12.17 at 21:15 said:

Umass India Pharm: top 10 online pharmacy in india – Umass India Pharm
Josephvax on 2025.12.17 at 22:04 said:

Umass India Pharm: Umass India Pharm – indian pharmacies safe
DelmarInoro on 2025.12.17 at 22:34 said:

https://umassindiapharm.xyz/# Umass India Pharm
CraigLed on 2025.12.17 at 23:42 said:

Umass India Pharm Umass India Pharm Umass India Pharm
MichaelTet on 2025.12.18 at 0:07 said:

http://umassindiapharm.com/# Umass India Pharm
RonaldDooca on 2025.12.18 at 1:02 said:

Hello there online pharmacy no prescription beneficial site.
KennethBum on 2025.12.18 at 3:32 said:

medication canadian pharmacy: Nyu Pharm – buying from canadian pharmacies
Josephvax on 2025.12.18 at 4:26 said:

best canadian pharmacy online: Nyu Pharm – buy canadian drugs
KennethBum on 2025.12.18 at 9:50 said:

canadian discount pharmacy: my canadian pharmacy review – the canadian pharmacy
Josephvax on 2025.12.18 at 10:48 said:

Umass India Pharm: Umass India Pharm – buy prescription drugs from india
DelmarInoro on 2025.12.18 at 13:19 said:

http://umassindiapharm.com/# Umass India Pharm
MichaelTet on 2025.12.18 at 13:31 said:

https://nyupharm.com/# canada drugs online
KennethBum on 2025.12.18 at 16:11 said:

canada ed drugs: reliable canadian pharmacy – canadian pharmacies
Josephvax on 2025.12.18 at 17:15 said:

legit mexican pharmacy without prescription: rybelsus from mexican pharmacy – п»їmexican pharmacy
CraigLed on 2025.12.18 at 18:29 said:

pharmacy website india indian pharmacies safe best india pharmacy
MichaelTet on 2025.12.18 at 20:18 said:

http://nyupharm.com/# canadian discount pharmacy
KennethBum on 2025.12.18 at 22:38 said:

Unm Pharm: best online pharmacies in mexico – mexican drugstore online
Josephvax on 2025.12.18 at 23:47 said:

canadian pharmacy service: canadian pharmacy uk delivery – legit canadian pharmacy
MichaelTet on 2025.12.19 at 3:06 said:

https://nyupharm.com/# thecanadianpharmacy
CraigLed on 2025.12.19 at 4:01 said:

legitimate canadian pharmacy online Nyu Pharm 77 canadian pharmacy
DelmarInoro on 2025.12.19 at 4:08 said:

https://umassindiapharm.com/# Umass India Pharm
Josephvax on 2025.12.19 at 6:21 said:

Umass India Pharm: Umass India Pharm – online pharmacy india
MichaelTet on 2025.12.19 at 9:46 said:

http://umassindiapharm.com/# indian pharmacy online
KennethBum on 2025.12.19 at 11:33 said:

Umass India Pharm: reputable indian pharmacies – buy medicines online in india
Josephvax on 2025.12.19 at 12:48 said:

my canadian pharmacy: canada rx pharmacy world – pharmacy in canada
CraigLed on 2025.12.19 at 13:29 said:

reputable canadian pharmacy canada online pharmacy cross border pharmacy canada
MichaelTet on 2025.12.19 at 16:27 said:

https://nyupharm.xyz/# canadian mail order pharmacy
KennethBum on 2025.12.19 at 17:58 said:

india online pharmacy: Umass India Pharm – Umass India Pharm
DelmarInoro on 2025.12.19 at 18:50 said:

https://unmpharm.xyz/# Unm Pharm
Rooli Casino Login on 2025.12.19 at 21:38 said:

Nein, denn kostenlose Casinospiele sind im Grunde genommen die gleichen Spiele,
die Sie in Online Casinos mit echtem Geld spielen können, jedoch ohne Ihr eigenes echtes
Geld als Einsatz zu verwenden. Denn einige der kostenlosen Casinospiele stehen nur Spielern aus bestimmten Ländern zur Verfügung.

Wenn Sie vor allem an Slotspielen interessiert sind, so können Sie jederzeit
gerne unsere spezielle Seiten besuchen, die voller
kostenloser Online Spielautomaten sind. Wenn Sie weiterlesen, werden Sie erfahren, wie Sie kostenlose Glücksspiele
ohne Registrierung und ohne Download spielen können, ohne dabei Ihr eigenes Bankkonto zu
belasten. Die Macher wollten allen Casinospielern die Möglichkeit geben ihre Lieblingsspiele
kostenlos testen zu können. Da man alle Casinospiele kostenlos Online Spielen kann, ist
diese Seite für begeisterte Casinospieler ein Muss!

In Deutschland gebaut – für die ganze Welt spielbar. Auch da natürlich kostenlos.
Meine Begeisterung für das Glücksspiel entfachte während meines ersten Besuchs in der
Spielbank Dortmund-Hohensyburg, und seitdem habe ich die Welt der Casinos und Wetten intensiv erkundet.

Echtgeld Spielautomaten verlangen einen Geldeinsatz, der
riskiert wird, um mögliche Gewinne zu erzielen.

References:
https://online-spielhallen.de/dolly-casino-promo-code-ihr-schlussel-zu-exklusiven-vorteilen/

freestyle developments

jQuery plugin to associate label “for” attribute with form controls that have dynamic id’s

How to use

TODO

1,636 thoughts on “jQuery plugin to associate label “for” attribute with form controls that have dynamic id’s”

Leave a Reply Cancel reply