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

  4. Норм Казино

    Если интересует актуальная информация о Norm Casino, telegram станет удобным источником новостей. Норм Казино регулярно публикует новые материалы и обновления

  9. https://t.me/noRm_casino/3

    Если интересует актуальная информация о Norm Casino, telegram станет удобным источником новостей. Норм Казино регулярно публикует новые материалы и обновления

  11. https://t.me/norm_casino/4

    Norm Casino постепенно становится узнаваемым благодаря своей концепции. Норм Казино предлагает пользователям современный подход и удобный интерфейс. Все новости доступны в официальном канале

  12. cheapest online pharmacy india: indianpharmacy com – buy drugs online

  13. https://t.me/norm_casino/3

    Если ищете Norm Casino официальный канал, рекомендую использовать проверенные ссылки. Там регулярно появляются актуальные публикации о Норм Казино

  16. https://t.me/s/norM_casino

    Когда впервые увидел Норм Казино, понравилась сама концепция проекта. Norm Casino делает акцент на удобстве использования и быстром доступе ко всем функциям. За обновлениями удобно следить через официальный telegram

  17. Норм Казино

    Норм Казино — это проект, который ориентирован на удобство и комфорт. Norm Casino регулярно публикует обновления через telegram. Благодаря этому пользователи всегда остаются в курсе событий

  18. buy prescription drugs from india: world pharmacy india – no prescription needed pharmacy

  21. MexiCare Direct: online pharmacy in mexico – mexico pet pharmacy

  25. Фальцевая кровля из рулонного металла требует специального оборудования для закатки швов. Ручной инструмент не обеспечит необходимой герметичности и прочности фальца. Оставить заявку Напыляемая полимочевина создаёт бесшовную гидроизоляцию. Наносится горячим методом за секунды. Подходит для любых форм но требует специализированного оборудования. Посмотреть сейчас Кровельная сталь с полиэстеровым покрытием не царапается при монтаже. Ходить по ней можно только в мягкой обуви по обрешётке. Открыть видео Плоская кровля под пешеходную нагрузку – бетонная стяжка толщиной 40 мм поверх экструдированного пенополистирола. Армирование сеткой 100х100 мм. Перейти в каталог

  29. Apex Casino

    Если интересует официальный сайт Apex Casino, рекомендуем следить за обновлениями в официальном Telegram-канале. Именно здесь публикуются все важные новости Apex Casino и актуальная информация для пользователей

  30. indian pharmacies safe Flexi Meds India new pharmacy online

  31. worldwide pharmacy: medication from mexico – MexiCare Direct

  32. казино апекс

    Apex Casino регулярно публикует обновления через официальный Telegram. Пользователи могут найти здесь официальный сайт Apex Casino, новости проекта и другую важную информацию

  33. Apex Casino

    Апекс Казино активно ведет официальный канал для пользователей. Через Telegram Apex Casino можно узнать последние новости проекта и найти официальный сайт Apex Casino

  35. Апекс казино

    Официальный канал Apex Casino создан для пользователей, которые хотят получать информацию напрямую. Здесь публикуются ссылки на официальный сайт Apex Casino, новости проекта и актуальные обновления

  36. Apex Casino

    Если нужен официальный источник информации об Апекс Казино, лучше использовать официальный Telegram Apex Casino. Здесь регулярно публикуются новости и обновления проекта

  37. gabapentin european pharmacopoeia: NeuroPath – neuropathic symptom support

  38. Apex Casino

    Официальный канал Апекс Казино помогает быстро получать доступ к актуальной информации. Здесь публикуются новости Apex Casino, официальный сайт проекта и свежие обновления

  43. rybelsus semaglutide tablets: semaglutide tablets online – oral semaglutide treatment

  44. EpicStar Telegram

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

  46. NeuroPath Pharmacy NeuroPath Pharmacy neuropathic symptom support

  47. EpicStar Telegram

    Если искали EpicStar Telegram, стоит обратить внимание именно на этот канал. Здесь публикуется вся актуальная информация и новости проекта

  49. EpicStar Casino

    Эпик Стар Казино — новый проект, за развитием которого удобно следить через официальный канал. Здесь публикуются все важные материалы

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>