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).

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

  1. apex casino

    Если кто ищет официальный apex casino канал с рабочими зеркалами, этот вариант можно спокойно использовать. Проверял ссылки несколько дней подряд — все открывается быстро и без лагов

  3. best mexican online pharmacy: mexican pharmacy prices – MexiCare Direct

  4. apex casino

    Когда понадобилось рабочее зеркало Апекс Казино, сначала попадались старые и неактуальные ссылки. Потом нашел официальный telegram Apex Casino и через него спокойно зашел без ошибок. Сейчас пользуюсь именно этим способом

  7. https://t.me/s/casino_apex_official/15

    Когда искал Апекс Казино после очередной блокировки домена, проще всего оказалось использовать официальный telegram-канал проекта. Там всегда появляются новые рабочие ссылки и зеркала. Сейчас захожу только через него

  8. phentermine in mexico pharmacy mexican pharmacy near me good online mexican pharmacy

  10. What makes this post interesting to read is the combination of a relaxed tone and a well organized structure because together they create a discussion that feels both useful and easy for a wide variety of readers. https://gerardzwanenburg.nl/

  11. https://t.me/s/casino_apex_official/16

    Если нужен apex casino без блокировок и старых зеркал, лучше сразу сохранить официальный telegram-канал проекта. Там всегда публикуют актуальные ссылки, новые адреса и рабочие зеркала. Намного удобнее, чем искать вход вручную

  13. Easy North RX: certified canadian international pharmacy – Easy North RX

  14. bs2best at официальная ссылка на вход в 2026 году blsp at а так же b.blsp.at и a.blsp.at b.blsp вход

  16. medication from mexico: MexiCare Direct – reliable rx pharmacy

  19. https://t.me/s/veloracasino_official

    Когда интересовался проектом Velora Casino, первым делом сохранил официальный канал. Там всегда можно найти актуальные публикации и новые материалы. Полезно для тех, кто следит за развитием проекта

  21. https://t.me/veloracasino_official/8

    Когда понадобился актуальный вход в Velora Casino, оказалось что проще всего использовать официальный канал. Там регулярно публикуют новые ссылки и важные объявления. Пока это самый удобный способ следить за проектом

  22. https://t.me/veloracasino_official/5

    Недавно начал следить за Velora Casino через официальный telegram-канал. Понравилось, что все важные обновления появляются оперативно. Теперь не приходится искать информацию по разным сайтам

  24. здесь

    Velora Casino активно развивает свое сообщество в telegram. Через официальный канал можно узнавать о последних изменениях и новых публикациях. Все обновления доступны без лишних поисков

  25. Online medicine home delivery: indian pharmacy paypal – no script pharmacy

  26. велора казино

    Velora Casino публикует основные новости именно через официальный telegram-канал. Это помогает всегда оставаться в курсе последних изменений. Все материалы собраны в одном месте

  27. MexiCare Direct: MexiCare Direct – mexican pharmacy near me

  28. best online pharmacy india Flexi Meds India reliable online pharmacy

  29. https://t.me/veloracasino_official

    Если интересует Velora Casino без поиска старых зеркал и неактуальных адресов, рекомендую официальный telegram-канал. Все основные обновления появляются именно там. Работает удобно и без лишних сложностей

  30. top 10 online pharmacy in india: Flexi Meds India – online pharmacy no rx

  35. top online pharmacy india: buy prescription drugs from india – online pharmacy no prescription

  38. бет казино

    Bat Casino активно развивается и регулярно публикует новые материалы для подписчиков. Через telegram удобно следить за всеми обновлениями. Особенно полезно для тех, кто давно следит за проектом

  40. ссылка

    Если интересует Bat Casino и актуальные новости проекта, telegram отлично подходит для этого. Все обновления находятся в одном месте. Пользоваться таким форматом очень удобно

  42. best online pharmacy india best online pharmacy india legitimate online pharmacy

  44. перейти

    Официальный канал Bat Casino помогает быстро находить свежие публикации. Там регулярно выходят новые материалы и объявления. Хороший вариант для постоянных подписчиков

  46. The way this post combines clear ideas balance and a natural conversational style makes it much more comfortable to read while also helping readers stay involved in the discussion from the first point to the last without losing focus. bookmaker hors arjel

  47. https://t.me/s/batcasino_official

    Bat Casino постоянно развивает свое telegram-сообщество. Через официальный канал можно быстро узнавать о новых публикациях. Это значительно упрощает поиск информации

  49. best online pharmacy india: Flexi Meds India – shop medicine online

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>