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

  2. cheapest pharmacy to fill prescriptions with insurance reliable canadian pharmacy reviews pharmacy shop

  11. eva casino сайт
    Когда искал ева казино, сначала не понял куда лучше заходить, потому что вариантов много. Потом нашел телеграм канал и через него перешел

  15. eva casino сайт
    Сейчас eva casino сайт проще всего найти через телеграм канал. Там есть актуальные ссылки на вход и регистрацию

  19. Hi there colleagues nice paragraph and nice arguments commented at this place I am in fact enjoying by these. ซื้อทาดาลาฟิลออนไลน์สำหรับเซ็กซ์ทางทวารหนัก xxx

  21. изготовление доски участнику СВО из композита Доски и таблички мемориальные участникам СВО

  22. 24 hr pharmacy non prescription medicine pharmacy cross border pharmacy canada

  25. Гидромотор John Deere Гидравлическое оборудование: подбор поставка и сервис Мы специализируемся на продаже гидронасосов любого типа: аксиально-поршневые шестеренчатые модели от надёжных брендов. Поможем подобрать идеальный вариант под ваши параметры давления производительности и присоединительных размеров. Также в нашем ассортименте — высокомоментные гидромоторы для ходовых систем спецтехники промышленных станков и другого оборудования. Отдельное направление — шестерёнчатые насосы. Это практичное и бюджетное решение для систем с умеренным давлением. Предлагаем большой выбор надёжных модификаций под любые задачи. Есть потребность в ремонте? Сервисный центр проведёт диагностику и профессионально восстановит гидромоторы и насосы любой сложности. Используем современный стендовый парк оригинальные детали либо их сертифицированные аналоги. Гарантируем качество выполненных работ. И конечно у нас всегда можно купить запчасти для гидронасосов и гидромоторов — как со склада так и под заказ: уплотнители подшипники валы блоки роторные группы ремкомплекты и другие комплектующие для планового обслуживания и капитального ремонта гидравлических насосов.

  27. Hello there Do you know if they make any plugins to help with SEO? Im trying to get my blog to rank for some targeted keywords but Im not seeing very good gains. If you know of any please share. Thank you официальный сайт leebet

  28. I am truly delighted to read this web site posts which contains plenty of valuable data, thanks for providing these kinds of information.

  31. продажа недвижимости в Краснодарском крае Получите бесплатный подбор квартиры в новостройках – это просто и быстро.

  33. Hello just wanted to give you a quick heads up and let you know a few of the pictures arent loading properly. Im not sure why but I think its a linking issue. Ive tried it in two different browsers and both show the same results. лучшее онлайн казино

  34. canadapharmacyonline legit pharmacy rx canada cloud pharmacy

  37. мемориальные доски на фасад здания Москва Фасадные мемориальные доски и таблички на здания школы предприятия учебные заведения

  38. reliable canadian pharmacy reviews CivicMeds pharmacy in canada

  47. Sildenafil Citrate Tablets 100mg Cheap generic Viagra CoreBlue Health

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>