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

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

  1. мобильное казино на деньги Некоторые мобильные казино также предлагают эксклюзивные бонусы и акции для своих мобильных игроков например приветственные бонусы за установку приложения еженедельные фриспины или кэшбэк. Это отличная возможность увеличить свой игровой банк и продлить время игры не рискуя собственными средствами. Обязательно ознакамливайтесь с условиями получения и использования бонусов чтобы получить максимальную выгоду.

  4. Верификация 7k казино регистрация прошла за 30 минут. Загрузил паспорт и селфи – одобрили.

  6. игровые автоматы онлайн топ Один из ключевых аспектов — это честность и надежность игрового заведения. Перед тем как ставить реальные деньги всегда стоит убедиться что выбранное онлайн-казино имеет лицензию от авторитетного регулятора например Malta Gaming Authority UK Gambling Commission и пользуется хорошей репутацией среди игроков. Проверка отзывов real users ознакомление с условиями вывода средств и политикой конфиденциальности помогут избежать неприятных сюрпризов. Игровые автоматы от известных провайдеров таких как NetEnt Microgaming Playtech как правило отличаются высоким качеством и прозрачностью работы.

  7. рейтинг игровых автоматов Кроме того стоит обратить внимание на такой показатель как процент возврата игроку RTP – Return to Player. Чем выше RTP тем больше процент ставок теоретически возвращается игрокам в долгосрочной перспективе. Слоты с RTP выше 96 считаются более выгодными. Также важна волатильность автомата: низкая волатильность означает частые но мелкие выигрыши тогда как высокая волатильность — редкие но крупные. Оптимальный выбор зависит от вашей склонности к риску и желаемой продолжительности игры.

  9. mexican drugstore: mexican pharmacy menu – mexico meds

  11. BajaMed Direct: BajaMed Direct – best mexican online pharmacy

  12. самые лучшие игровые автоматы Начните свое приключение в мире онлайн-казино сегодня с Casino-Gid.best и откройте для себя мир бесплатных возможностей Удачи в игре

  15. BajaMed Direct farmacia pharmacy mexico BajaMed Direct

  20. buy prescription drugs from india: Indo-Generic Export – top online pharmacy india

  21. world pharmacy india: indianpharmacy com – reputable indian pharmacies

  22. бездепозитный бонус casino Рынок онлайн-казино постоянно развивается и вместе с ним меняются и бонусные предложения. Мы видим тенденцию к более персонализированным бонусам основанным на игровой активности пользователя а также к появлению новых форматов таких как бонусы за участие в турнирах или за достижение определенных уровней лояльности. Casino-Gid.best будет продолжать отслеживать эти изменения чтобы всегда предоставлять вам самую свежую и актуальную информацию.

  25. игровые автоматы с бездепозитным бонусом за регистрацию с выводом Выбор сайта с игровыми автоматами – это ответственный шаг который требует внимательного подхода. Наш рейтинг призван помочь вам сориентироваться в многообразии предложений и выбрать лучшую платформу для безопасной и увлекательной игры. Помните что азартные игры должны приносить удовольствие и всегда играйте ответственно. Удачных вращений и крупных выигрышей

  26. buy medicines online in india: п»їlegitimate online pharmacies india – buy prescription drugs from india

  28. US Meds Outlet: US Meds Outlet – economy pharmacy

  30. Новый адрес работает отлично уже целую неделю. 7k рабочее зеркало без сбоев и лагов вообще.

  33. бездепозитные бонусы без отыгрыша В лабиринтах виртуального мира онлайн-казино где каждый новый игрок является желанным гостем порой встречаются настоящие сокровища. И среди них без сомнения сияет ярким светом бездепозитный бонус за регистрацию без отыгрыша. Это предложение которое звучит как сказка но на практике является вполне реальным инструментом для тех кто стремится к азартным развлечениям с минимальными рисками. Для многих игроков – это не просто бонус а возможность начать свое захватывающее путешествие в мир слотов и настольных игр почувствовать вкус победы и что самое главное унести с собой реальный выигрыш не вложив ни копейки

  37. US Meds Outlet: US Meds Outlet – online pharmacy in turkey

  39. new zealandn poker 2 free game, play free australian poker machines and australian gambling law, or
    united kingdom civil war poker tables

    Look at my web page – real money games online win – Damaris -

  40. лицензионные онлайн казино в Турции Добро пожаловать в мир где азарт встречается с роскошью а удача становится вашим верным спутником. Топ казино – это не просто игровая площадка это вершина индустрии онлайн-гемблинга место где сочетаются безупречный сервис высочайшие стандарты безопасности и захватывающие игровые возможности. Здесь каждый игрок от новичка до искушенного профессионала находит свой путь к победе окруженный атмосферой эксклюзивности и комфорта.

  41. Все продолжает работать без остановок. Доступно круглосуточно без выходных.

  45. казино с минимальным депозитом 100 Казино с минимальным депозитом и выводом – это онлайн-заведения которые устанавливают низкий порог для пополнения игрового счета часто от 1 до 20 долларов/евро и одновременно обеспечивают возможность вывода даже небольших сумм выигрыша. Эти два аспекта — минимальный депозит и гарантированный вывод пусть и небольшой суммы — делают такую платформу особенно привлекательной.

  48. mexico drug store online: BajaMed Direct – mexico drug store

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>