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

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

  1. canada drug pharmacy: NorthAccess Rx – canadian pharmacies compare

  2. online pharmacy india: Global India Pharmacy – Global India Pharmacy

  5. Whats up to every body its my first visit of this weblog; this webpage includes remarkable and really fine stuff designed for readers. Paris sportif cryptomonnaies

  6. Hi to every body its my first go to see of this web site; this weblog consists of amazing and really good data designed for readers. Buy viagra here buy cialis on this site

  11. Официальная ссылка маркетплейса Зелёный Мир 3мир маркет

  16. Its amazing for me to have a site which is helpful in support of my know-how. thanks admin Betify Casino

  18. Казино Вавада зарекомендовало себя как одна из самых надёжных платформ для онлайн-игр. Начните играть прямо сейчас, перейдя на вавада рабочее зеркало для регистрации. Зеркала платформы обеспечивают стабильный доступ при любых ограничениях. Вывод средств осуществляется быстро на банковские карты и электронные кошельки. Не упустите приветственный бонус при первой регистрации в казино Вавада.

  20. canada discount pharmacy: canadian family pharmacy – best canadian pharmacy online

  21. смеситель с краном для питьевой воды Также в наличии измельчители отходов для кухонной раковины сантехника для дома и дачи смесители с краном для питьевой воды душевые системы скрытого монтажа и унитазы различных типов.

  22. девушки Донецк Не упустите шанс встретить свою судьбу Для тех кто предпочитает оперативное общение мы предлагаем удобный поиск через Telegram ТГ. Найти девушку в ЛНР стало проще чем когда-либо благодаря удобному интерфейсу и активному сообществу.

  23. матовые зип лок пакеты с бегунком Эти пакеты идеально подходят для хранения различных предметов от мелких аксессуаров до продуктов питания обеспечивая надежную защиту от влаги и пыли.

  25. my canadian pharmacy rx: NorthAccess Rx – legit canadian online pharmacy

  26. cheap canadian pharmacy: NorthAccess Rx – canadian pharmacy scam

  28. Знакомства ДНР Не упустите шанс встретить свою судьбу Для тех кто предпочитает оперативное общение мы предлагаем удобный поиск через Telegram ТГ. Ищете свою вторую половинку в Луганске или ЛНР?

  29. опасность откатывания мерседес мерседес не включается драйв

  30. Казино Vavada успешно развивается на рынке и постоянно наращивает базу пользователей. На странице https://uzumasa.studypc.net/2023/08/29/preimushchestva-zerkala-vavada-dlia-internet-igr/ размещены актуальные бонусы и условия их получения. Все автоматы работают на сертифицированных генераторах случайных чисел. Новые слоты появляются в каталоге сразу после официального релиза. Зарегистрируйтесь и получите бонус на первый депозит в казино Vavada.

  31. Официальная ссылка маркетплейса Зелёный Мир Зелёный Мир

  32. магазин кухонных моек Мы предлагаем онлайн сантехнику включая разнообразные полотенцесушители с полками узкие и М-образные модели а также напольные смесители с душем.

  33. девушки Донецк ТГ Знакомства Донецк ТГ — это быстрый и эффективный способ найти девушку в вашем городе для серьезных отношений или дружбы. Мы объединяем людей готовых к новым знакомствам в удобном и безопасном пространстве. Если ваша цель – найти девушку в Луганске наш сайт предлагает обширную базу анкет и удобные инструменты для поиска.

  34. Новости России читать Они выступают проводниками между событиями и обществом предоставляя нам важные полезные данные и всестороннюю информацию.

  35. девушки Донецк ТГ Ищете свою половинку в Донецке или ДНР? Присоединяйтесь к нам и ваши знакомства ЛНР ТГ могут привести к самым неожиданным и счастливым встречам.

  36. online vet pharmacy: Paw Trust Meds – п»їdog medication online

  37. Казино Вавада выделяется прозрачными правилами и честными условиями для всех пользователей. Личный кабинет содержит историю ставок, транзакций и активных бонусов. Узнать больше можно на https://summerschool.degrowth.org/2018/02/14/irene-iniesta-arandia/ с описанием текущих акций и бонусов. Пополнение счёта доступно через Visa, Mastercard, МИР и криптовалюту. Играйте с любого устройства без потери качества графики и скорости.

  38. Global India Pharmacy: Global India Pharmacy – indian pharmacies safe

  39. pet drugs online: pet meds for dogs – dog prescriptions online

  40. Новости международные читать важные Деловые новости политики и Российской Федерации как и Яндекс новости освещают спектр тем от экономики до международных отношений формируя целостную картину мира.

  41. девушки Луганск Ищете свою вторую половинку в Луганске или ЛНР?

  42. Hey there I am so delighted I found your blog I really found you by accident while I was researching on Yahoo for something else Regardless I am here now and would just like to say kudos for a marvelous post and a all round enjoyable blog I also love the theme/design I dont have time to go through it all at the moment but I have bookmarked it and also added in your RSS feeds so when I have time I will be back to read a great deal more Please do keep up the great job. https://eurostandart.kiev.ua/yak-zakhystyty-korpus-fary-na-mazda-cx-5-vid.html

  47. Знакомства ЛНР ТГ Откройте для себя новый уровень онлайн-общения. Наши возможности простираются на всю территорию ЛНР предлагая аналогичные сервисы для поиска.

  49. online casino usa bonus, online gambling roulette united states and casino
    in united states, or no deposit mobile casino australia

    My web page bingosync join (Michel)

  50. полотенцесушитель лесенка Также в ассортименте представлены душевые комплекты оборудование шланги лейки штанги сифоны сливы-переливы и душевые лотки.

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>