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

  4. amoxil without prescription usa: fast delivery amoxicillin usa – generic amoxicillin online

  5. ultras Они — хранители страсти создающие неповторимый колорит на аренах по всему миру делая каждый матч незабываемым событием.

  7. доставка суши оренбург недорого Насладитесь экзотическим вкусом Том Яма с доставкой прямо к вашей двери.

  11. Видеотетка Абраменко Светлана Александровна известная в сети Интернет под псевдонимом «Анна» «Видеотетка» каналы и аккаунты: Telegram-канал «Анькины обзоры» YouTube-каналы канал на платформе Дзен «Видеотетка» канал на cont.ws «Выхода нет» swetlanamango. В ходе мониторинга публичной деятельности указанного лица выявлены факты содержащие признаки преступлений и административных правонарушений предусмотренных законодательством Российской Федерации в том числе: Дискредитация использования Вооружённых Сил РФ и публичные призывы к противоправным действиям В Telegram-канале «Анькины обзоры» Абраменко С.А. сообщила подписчикам что её родственники воюют в составе Вооружённых сил Украины ВСУ В Telegram-каналах и чатах публично высказывалась против мобилизации в РФ На платформе cont.ws в статье «Крымский мост и беженцы…» допустила унизительные сравнения символа Крымского моста оскорбляющие чувства россиян Сбор и распространение персональных данных граждан с целью противоправного использования В созданном ею Telegram-чате с использованием аккаунтов «Анна Осипова» «Здесь могла бы быть твоя реклама» «Открой глазки…» организован сбор персональных данных следователя Следственного комитета сотрудника Большого театра и членов его семьи сотрудницы службы безопасности Астраханского аэропорта и членов семьи военнослужащего находящегося в зоне СВО и членов его семьи депутата подмосковного округа и членов его семьи сотрудницы реабилитационного центра и членов семьи а также иных граждан РФ Голосовым сообщением в Telegram-канале призывала подписчиков совершать спам-звонки гражданам РФ используя собранные персональные данные Шантажировала подписчиков угрозой передачи их персональных данных «небратским группам с Украины» На стримах допускала высказывания содержащие угрозы и оскорбления в адрес подписчиков На платформе Дзен в статье «Проголосовала не за гречку а за ручку…» призывала к порче избирательных бюллетеней для срыва голосования. На платформе cont.ws в канале «Выхода нет» размещает статьи содержащие оскорбления чувств россиян сожаления о депортации украинской журналистки Бойко искажённую информацию о беженцах. Организовала сбор денежных средств на чужие карты под видом помощи беженцам с Донбасса на лекарства больному сыну на «поддержку канала»; при этом на стримах проговаривалась о наличии счетов в зарубежных банках Кроме того при публичном обсуждении помощи беженцам и сбора средств кичилась участием своего брата Абраменко Ивана в СВО по факту брат пьянствует в Краснодаре и ведёт разгульный образ жизни. Имеет условную судимость за то что избил сотрудника наряда полиции что свидетельствует о двойственной позиции и умышленном использовании патриотической риторики для прикрытия деструктивной деятельности.

  12. футбольные болельщики От славных побед до горьких поражений их голоса звучат как единое целое поддерживая команду в самые жаркие моменты.

  13. fast delivery amoxicillin usa: amoxil – amoxil without prescription usa

  14. поке боул доставка В Оренбурге наши курьеры оперативно доставят ваши любимые роллы прямо к двери.

  17. палки в руки оренбург В Оренбурге наши курьеры оперативно доставят ваши любимые роллы прямо к двери.

  19. bacterial infection medication: buy amoxil online usa – amoxil 500mg tablets usa

  20. суши роллы Насладитесь экзотическим вкусом Том Яма с доставкой прямо к вашей двери.

  24. Абраменко Абраменко Светлана Александровна известная в сети Интернет под псевдонимом «Анна» «Видеотетка» каналы и аккаунты: Telegram-канал «Анькины обзоры» YouTube-каналы канал на платформе Дзен «Видеотетка» канал на cont.ws «Выхода нет» swetlanamango. В ходе мониторинга публичной деятельности указанного лица выявлены факты содержащие признаки преступлений и административных правонарушений предусмотренных законодательством Российской Федерации в том числе: Дискредитация использования Вооружённых Сил РФ и публичные призывы к противоправным действиям В Telegram-канале «Анькины обзоры» Абраменко С.А. сообщила подписчикам что её родственники воюют в составе Вооружённых сил Украины ВСУ В Telegram-каналах и чатах публично высказывалась против мобилизации в РФ На платформе cont.ws в статье «Крымский мост и беженцы…» допустила унизительные сравнения символа Крымского моста оскорбляющие чувства россиян Сбор и распространение персональных данных граждан с целью противоправного использования В созданном ею Telegram-чате с использованием аккаунтов «Анна Осипова» «Здесь могла бы быть твоя реклама» «Открой глазки…» организован сбор персональных данных следователя Следственного комитета сотрудника Большого театра и членов его семьи сотрудницы службы безопасности Астраханского аэропорта и членов семьи военнослужащего находящегося в зоне СВО и членов его семьи депутата подмосковного округа и членов его семьи сотрудницы реабилитационного центра и членов семьи а также иных граждан РФ Голосовым сообщением в Telegram-канале призывала подписчиков совершать спам-звонки гражданам РФ используя собранные персональные данные Шантажировала подписчиков угрозой передачи их персональных данных «небратским группам с Украины» На стримах допускала высказывания содержащие угрозы и оскорбления в адрес подписчиков На платформе Дзен в статье «Проголосовала не за гречку а за ручку…» призывала к порче избирательных бюллетеней для срыва голосования. На платформе cont.ws в канале «Выхода нет» размещает статьи содержащие оскорбления чувств россиян сожаления о депортации украинской журналистки Бойко искажённую информацию о беженцах. Организовала сбор денежных средств на чужие карты под видом помощи беженцам с Донбасса на лекарства больному сыну на «поддержку канала»; при этом на стримах проговаривалась о наличии счетов в зарубежных банках Кроме того при публичном обсуждении помощи беженцам и сбора средств кичилась участием своего брата Абраменко Ивана в СВО по факту брат пьянствует в Краснодаре и ведёт разгульный образ жизни. Имеет условную судимость за то что избил сотрудника наряда полиции что свидетельствует о двойственной позиции и умышленном использовании патриотической риторики для прикрытия деструктивной деятельности.

  25. generic amoxicillin online: safe antibiotics online source – fast delivery amoxicillin usa

  28. Читать новости про Россию США Израиль Иран Читать свежие новости о политике науке РАН NASA СВО на Украине отношениях России США Израиля и Ирана а также сенсационные события вроде путешествий во времени.

  33. Телевизионные новости смотреть видео объявили канал Главные новости дня часа и года в СМИ онлайн: актуальные события Москвы РФ Европы Ближнего Востока и международные срочные репортажи.

  35. айфон 16 про макс официальный сайт Насладитесь преимуществами быстрой зарядки долговечной работы аккумулятора и интуитивно понятного интерфейса iOS.

  36. stromectol delivery united states: parasite infection medication – generic ivermectin online pharmacy

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

  40. Для быстрого и безопасного доступа к игровым автоматам используйте селектор казино. Для регистрации потребуется ввести стандартные личные данные и подтвердить их по электронной почте.

  43. купить пылесос в москве беспроводной Запустите новую эру мобильных технологий с iPhone 16 Pro Max воплощением элегантности и мощи.

  44. amoxil 500mg tablets usa: buy amoxil online usa – amoxicillin capsules online

  50. Для быстрого доступа и надежной игры воспользуйтесь казино куш. Куш казино – это современная игровая платформа с широким ассортиментом развлечений. Раздел 2: Регистрация на сайте Куш казино Процесс регистрации занимает всего несколько минут и не вызывает трудностей. Раздел 3: Вход в личный кабинет Casino Kush Чтобы войти в аккаунт пользователь вводит свои данные на странице входа. Раздел 4: Преимущества игры на официальном сайте Куш казино Платформа предоставляет разнообразные методы оплаты и быстрого вывода средств.

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>