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

Posted on by

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

  1. Download the plugin and add it to your page
  2. 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,586 thoughts on “jQuery plugin to associate label “for” attribute with form controls that have dynamic id’s”

  2. цена двухкомнатной квартиры жк светский лес сочи отзывы

  3. Hey guys I just discovered a useful website for affordable pills. For those looking for ED meds at factory prices this store is highly recommended. You get lowest prices to USA. Visit here: indiapharm.in.net. Good luck.

  4. Hi all I just found an amazing online drugstore to buy generics. If you need ED meds cheaply this site is the best place. It has fast shipping to USA. Take a look: check availability. Cheers.

  5. сколько цена квартиры жк светский лес сочи застройщик

  6. Hey everyone To be honest I found a great online drugstore to order prescription drugs hassle-free. For those who need safe pharmacy delivery OnlinePharm is highly recommended. Secure shipping and it is very affordable. Link here: check availability. Be well.

  9. Greetings To be honest I found a reliable international pharmacy for purchasing prescription drugs online. For those who need antibiotics this site is highly recommended. They ship globally plus huge selection. Visit here: safe online drugstore. Cya.

  15. какие цены на квартиры жк светский лес цены

  18. Hey everyone I wanted to share an excellent international pharmacy to order prescription drugs securely. If you are looking for no prescription drugs OnlinePharm is very good. Great prices plus huge selection. See for yourself: safe online drugstore. Best of luck.

  21. Hi To be honest I found a reliable source for meds to order generics online. If you are looking for no prescription drugs this site is the best choice. They ship globally and huge selection. Link here: https://onlinepharm.jp.net/#. Best regards.

  22. Greetings I just ran into a trusted resource for affordable pills. For those seeking and want cheap antibiotics Pharm Mex is the best option. They ship to USA plus very reliable. Take a look: https://pharm.mex.com/#. Have a great week.

  25. Эконом-вариант на сутки: чистая комната с кухней и санузлом аренда квартиры на сутки гродно. Все необходимое для ночлега по пути. Рядом трасса на Варшаву и Минск. Гостеприимные хозяева быстрое заселение.

  27. 真实的人类第一季高清完整版采用机器学习个性化推荐，海外华人可免费观看最新热播剧集。

  28. Производим пластиковые https://zavod-dimax.ru окна и выполняем профессиональную установку. Качественные материалы точные размеры быстрый монтаж и гарантийное обслуживание для комфорта и уюта в помещении.

  29. Жалюзи от производителя https://balkon-pavilion.ru изготовление продажа и профессиональная установка. Большой выбор дизайнов точные размеры надёжная фурнитура и комфортный сервис для квартир и офисов.

  30. Изделия из пластмасс https://ftk-plastik.ru собственного производства. Продажа оптом и в розницу широкий ассортимент надёжные материалы и стабильные сроки. Выполняем заказы любой сложности по техническому заданию клиента.

  31. Производство оборудования https://repaircom.ru с предварительной разработкой и адаптацией под требования клиента. Качественные материалы точные расчёты соблюдение сроков и техническая поддержка.

  40. Торговая мебель https://woodmarket-for-business.ru от производителя для бизнеса. Витрины стеллажи островные конструкции и кассовые модули. Индивидуальный подход надёжные материалы и практичные решения для продаж.

  41. Szukasz kasyna? kasyno internetowe w Polsce: wybor najlepszych stron do gry. Licencjonowane platformy popularne sloty i kasyna na zywo wygodne metody platnosci uczciwe warunki i aktualne oferty.

  42. Grasz w kasynie? Kasyno pl w Polsce to najlepsze miejsca do gry w latach 2025–2026. Zaufane strony sloty i gry na zywo przejrzyste warunki wygodne wplaty i wyplaty.

  43. Ищешь блины для штанки? профессиональные блины для штанги для эффективных силовых тренировок. Чугунные и резиновые диски разные веса долговечность и удобство использования. Решение для новичков и опытных спортсменов.

  44. Hello team I came across a 153 valuable page that I think you should dive into. This tool is packed with a lot of useful information that you might find valuable. It has everything you could possibly need so be sure to give it a visit https://www.nmkpro.in/how-to-promote-on-tiktok-an-algorithm-for-any-business/ Additionally remember not to neglect everyone which a person constantly may inside this particular piece find solutions for your the very tangled inquiries. We attempted — explain all content in an very understandable method.

  50. Herkese merhaba Vaycasino kullan?c?lar? ad?na k?sa bir duyuru paylas?yorum. Bildiginiz gibi site adresini tekrar guncelledi. Giris sorunu yas?yorsan?z panik yapmay?n. Guncel siteye erisim linki su an burada: Vay Casino Apk Paylast?g?m baglant? uzerinden direkt siteye erisebilirsiniz. Lisansl? casino deneyimi surdurmek icin Vay Casino tercih edebilirsiniz. Tum forum uyelerine bol sans temenni ederim.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>