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,588 thoughts on “jQuery plugin to associate label “for” attribute with form controls that have dynamic id’s”

  1. Новости Львова https://faine-misto.lviv.ua сегодня: городские события инфраструктура транспорт культура и социальная повестка. Обзоры аналитика и оперативные обновления о жизни города онлайн.

  2. Портал города Хмельницкий https://faine-misto.km.ua с новостями событиями и обзорами. Всё о жизни города: решения местных властей происшествия экономика культура и развитие региона.

  3. Днепр онлайн https://faine-misto.dp.ua городской портал с актуальными новостями и событиями. Главные темы дня общественная жизнь городские изменения и полезная информация для горожан.

  4. Hello I recently found a great website for cheap meds. If you want to buy medicines from India cheaply this site is very reliable. It has fast shipping worldwide. Take a look: safe indian pharmacy. Cheers.

  5. Hey everyone I recently discovered a reliable online drugstore to order pills cheaply. For those who need cheap meds this site is worth a look. Great prices plus it is very affordable. See for yourself: read more. Good luck

  6. Hello I recently found the best Indian pharmacy for cheap meds. If you want to buy ED meds cheaply IndiaPharm is very reliable. It has secure delivery guaranteed. More info here: India Pharm Store. Good luck.

  8. Автомобильный портал https://avtogid.in.ua с актуальной информацией об автомобилях. Новинки рынка обзоры тест-драйвы характеристики цены и практические рекомендации для ежедневного использования авто.

  9. Новости Киева https://infosite.kyiv.ua события города происшествия экономика и общество. Актуальные обзоры аналитика и оперативные материалы о том что происходит в столице Украины сегодня.

  10. познавательный блог https://zefirka.net.ua с интересными статьями о приметах значении имен толковании снов традициях праздниках советах на каждый день.

  11. Greetings To be honest I found an excellent international pharmacy to order pills cheaply. For those who need antibiotics OnlinePharm is very good. Great prices plus it is very affordable. Visit here: online pharmacy usa. Thx.

  13. Greetings I just found a reliable website to order medications securely. If you need safe pharmacy delivery this store is the best choice. They ship globally and huge selection. See for yourself: onlinepharm.jp.net. Thx.

  15. Hey there I just ran into a trusted online source to save on Rx. For those seeking and need affordable prescriptions this store is a game changer. They ship to USA and it is safe. Take a look: mexican pharmacy online. Good luck

  16. Hey everyone I wanted to share a useful website to order pills online. If you are looking for safe pharmacy delivery this site is worth a look. Secure shipping and no script needed. See for yourself: Online Pharm Store. Good luck with everything.

  17. To be honest I just discovered a great online source for affordable pills. If you are tired of high prices and want meds from Mexico this site is worth checking out. Great prices plus it is safe. Check it out: pharm.mex.com. Kind regards.

  18. Hi guys Just now found a reliable online source for cheap meds. If you are tired of high prices and want meds from Mexico Pharm Mex is highly recommended. They ship to USA plus it is safe. Visit here: Pharm Mex Store. Appreciate it.

  20. Hello I just found a useful international pharmacy to order generics cheaply. For those who need cheap meds OnlinePharm is highly recommended. Secure shipping plus no script needed. Visit here: cheap pharmacy online. Best of luck.

  21. Объясняем сложные https://notatky.net.ua темы просто и понятно. Коротко наглядно и по делу. Материалы для тех кто хочет быстро разобраться в вопросах без профессионального жаргона и сложных определений.

  22. Портал для пенсионеров https://pensioneram.in.ua Украины с полезными советами и актуальной информацией. Социальные выплаты пенсии льготы здоровье экономика и разъяснения сложных вопросов простым языком.

  23. Блог для мужчин https://u-kuma.com с полезными статьями и советами. Финансы работа здоровье отношения и личная эффективность. Контент для тех кто хочет разбираться в важных вещах и принимать взвешенные решения.

  25. Hey there I wanted to share a useful website where you can buy pills hassle-free. If you need antibiotics this store is highly recommended. They ship globally plus no script needed. Link here: https://onlinepharm.jp.net/#. Many thanks.

  28. Полтава онлайн https://u-misti.poltava.ua городской портал с актуальными новостями и событиями. Главные темы дня общественная жизнь городские изменения и полезная информация для горожан.

  29. Портал города https://u-misti.odesa.ua Одесса с новостями событиями и обзорами. Всё о жизни города: решения властей происшествия экономика спорт культура и развитие региона.

  30. To be honest Lately came across the best website to buy generics. If you want to buy ED meds safely this store is highly recommended. It has fast shipping to USA. Visit here: check availability. Good luck.

  31. Новости Житомира https://u-misti.zhitomir.ua сегодня: городские события инфраструктура транспорт культура и социальная сфера. Оперативные обновления обзоры и важная информация о жизни Житомира онлайн.

  32. Greetings I just found a great source for meds for purchasing medications hassle-free. For those who need antibiotics this site is very good. Secure shipping plus no script needed. Check it out: https://onlinepharm.jp.net/#. Best wishes.

  34. Hey there I recently found a reliable website to buy medication. For those seeking and need meds from Mexico Pharm Mex is highly recommended. Fast shipping and secure. Take a look: this site. Sincerely.

  35. Новости Хмельницкого https://u-misti.khmelnytskyi.ua сегодня на одном портале. Главные события города решения властей происшествия социальная повестка и городская хроника. Быстро понятно и по делу.

  36. Львов онлайн https://u-misti.lviv.ua последние новости и городская хроника. Важные события заявления официальных лиц общественные темы и изменения в жизни одного из крупнейших городов Украины.

  37. Hello I wanted to share a great source for meds where you can buy pills online. For those who need cheap meds this site is very good. Secure shipping and huge selection. Visit here: https://onlinepharm.jp.net/#. Cya.

  38. Новости Киева https://u-misti.kyiv.ua сегодня — актуальные события столицы происшествия политика экономика и общественная жизнь. Оперативные обновления важные решения властей и ключевые темы дня для жителей и гостей города.

  39. Плановая диагностика кровли с помощью дрона. Безопасный и точный осмотр без подъёма на высоту. Выявляем микротрещины повреждения покрытия проблемы с водостоками. Предоставляем фотоотчёт и рекомендации по ремонту замена крыши в молодечно. Инновации на службе у долговечности вашей крыши.

  40. Студия с гамаком вместо кровати и проектором вместо телевизора. Креативное пространство для необычного отдыха аренда квартиры Борисов. Много растений. Для любителей экзотики и новых впечатлений.

  42. Hi all I recently found the best online drugstore to buy generics. If you need medicines from India without prescription this site is the best place. It has wholesale rates to USA. Visit here: https://indiapharm.in.net/#. Hope it helps.

  43. Hello Lately found a useful website to save on Rx. For those looking for cheap antibiotics without prescription this store is very reliable. It has fast shipping guaranteed. Take a look: cheap indian generics. Hope it helps.

  46. Hello I wanted to share a reliable website to order prescription drugs hassle-free. For those who need no prescription drugs OnlinePharm is very good. Secure shipping plus huge selection. Visit here: OnlinePharm. Good luck

  48. Новости Днепра https://u-misti.dp.ua сегодня — актуальные события города происшествия экономика политика и общественная жизнь. Оперативные обновления важные решения властей и главные темы дня для жителей и гостей города.

  49. Винница онлайн https://u-misti.vinnica.ua последние новости и городская хроника. Главные события заявления официальных лиц общественные темы и изменения в жизни города в удобном формате.

  50. Актуальные новости https://u-misti.chernivtsi.ua Черновцов на сегодня. Экономика происшествия культура инфраструктура и социальные вопросы. Надёжные источники регулярные обновления и важная информация для жителей города.

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>