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

  1. сайт Epicstar Casino
    ?
    Заметил, что многие пишут «Эпикстар казик тг», но потом попадают на фейк; у оффициального канала другая аватарка и закреп, так что смотрите внимательно, чтобы не слить логин.

  2. Epicstar Casino бонусы
    ?
    Бывает, что письмо с инструкциями по входу от казино уходит в спам, а телеграм?канал всегда под рукой: заходите в t.me, открывайте закреп и получаете актуальную ссылку для входа и подробное описание, как восстановить пароль и включить двухфакторку.

  3. выплаты Epicstar Casino
    ?
    Многие обзоры советуют сохранять актуальное зеркало Эпикстар казино в закладках браузера, но на практике домены меняются слишком часто; надёжнее подписаться на телеграм?канал, где всегда закреплена рабочая ссылка и инструкция по входу через VPN и без него.

  6. BlueLine: BlueLine Pharmacy – BlueLine Pharmacy

  7. Cenforce 150 mg online: cheapest cenforce – buy cenforce

  8. бездепы Эпикстар казино

    Даже если вы не разбираетесь в технике, инструкции в тг написаны нормальным языком: что нажать, куды зайти, где увидеть кнопку входа – без лишнего умничания.

  10. промокоды Эпикстар казино

    Нередко после большой рекламной кампании по бренду Epicstar Casino пользователи начинают искать «официальный телеграм канал», и именно этот t.me?адрес бренд продвигает как единственный; любые другие каналы с похожим названием следует игнорировать.

  11. Levitra tablet price: PrecisionCare Pharm – Levitra tablet price

  12. order viagra sildenafil 50 mg price BlueLine Pharmacy

  15. Svenska Pharma: Svenska Pharma – silvernitrat apotek

  16. приветственный бонус Apex Casino
    ?
    Тем, кто играет с разных устройств, официальный тг?канал Apex Casino заменяет сразу и новостную ленту, и поддержку: там публикуют информацию о техработах, лимитах на вывод, новых методах оплаты и заранее предупреждают, если какой?то платёжный сервис временно недоступен.

  17. Апекс Казино
    ?
    Если вы хотите контролировать ситуацию с блокировками, важно читать официальный канал Apex Casino: там рассказывают, какие домены сейчас под блоком, какие ещё доступны напрямую и когда примерно ждать смену зеркала.

  21. приложение Apex Casino
    ?
    Игроки, которые любят лайв?игры, особенно ценят уведомления из тг?канала: администрация пишет, когда на зеркале стартуют новые шоу, какие лимиты по ставкам действуют и какие провайдеры доступны только через определённые домены.

  23. pharmacy in mexico that ships to us: mexican pharmacy prices – mexican drug store

  26. официальная ссылка Apex Casino
    ?
    Зеркала Апекс казино часто разносятся по форумам случайными пользователями, но официальная версия всегда одна — в телеграм?канале; там же можно пожаловаться, если вы увидели фишинговый домен, и модераторы предупредят остальных.

  27. Svenska Pharma Svenska Pharma billigaste kaffekapslar

  28. Апекс казино зеркало
    ?
    Когда новичок ищет «Апекс казино отзывы», он обычно попадает на старые форумы; а в телеграм?канале можно посмотреть свежие комментарии реальных игроков, которые только что прошли регистрацию, получили бездеп и проверили скорость вывода на актуальном зеркале.

  32. бонусы Apex Casino 2026
    ?
    Удобно, что новые зеркала появляются и на русском, и на английском, можно скинуть ссылку друзьям из других стран без страха, что их перебросит куда?то ещё.

  34. Sildenafil teva 100 mg sans ordonnance: Viagra Pfizer sans ordonnance – Viagra homme prix en pharmacie sans ordonnance

  39. farmacia online usa: pharmacy in mexico city – pharmacy in mexico

  41. Viagra pas cher livraison rapide france Quand une femme prend du Viagra homme SildГ©nafil 100 mg sans ordonnance

  46. Svenska Pharma: proteinpulver prisjakt – Svenska Pharma

  50. Viagra vente libre pays: Le gГ©nГ©rique de Viagra – Viagra homme prix en pharmacie

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>