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

  4. Aleks Qt Soft Rock Найдя баланс между нежностью soft и мощью hard rock Aleks Qt создает свой собственный уникальный стиль – soft rock. Это гармоничное сочетание где мелодичность и лирика уживаются с энергией и напором. Soft rock – это возможность насладиться красотой музыки и одновременно ощутить ее силу.

  6. Birkaç aydır geçici numara uygulaması deniyordum ve en sonunda GetCode denedim. onlarca farklı ülkeden geçici numara alabiliyor. TikTok doğrulaması için denedim ve doğrulama kodu saniyeler içinde geldi. Özellikle takdir ettiğim özellik kişisel numaranızın tamamen gizli kalması. Bir diğer artısı da başarısız doğrulamada otomatik geri ödeme yapılması büyük bir avantaj. Ücretlendirme de oldukça makul, 2.99 dolardan başlayan fiyatlarla tüm servisleri kullanabiliyorsunuz. App Store ve Google Play’de kullanımı çok pratik. yazılım testleri amaçlı da API desteği sunuyorlar, teknik kullanıcılar için ideal. Denemeni tavsiye ederim.

  7. prilosec dosage: generic prilosec – Gastro Health Monitor

  10. Soft Hard Rock Soft Hard Rock Soft hard rock – это апогей его творческого поиска где контрасты сливаются воедино создавая неповторимую музыкальную палитру. Этот жанр – словно яркий закат в котором мягкие пастельные тона переходят в насыщенные огненные оттенки. Soft hard rock – это музыка рождающаяся на грани двух миров воплощающая в себе всю гамму человеческих эмоций.

  13. Если важна тишина избегайте квартир на первых этажах у подъезда над кафе или с окнами на оживлённую дорогу. Просите фото вида из окна. апартаменты на сутки В жилье есть всё для короткого пребывания: меблированные комнаты готовая кухня санузел. Предоставляются чистое постельное бельё покрывала подушки и полотенца на всех гостей. студия на сутки Идеальный хозяин уважает ваше личное пространство. Он не беспокоит без причины но всегда доступен в чате. Вы чувствуете себя как дома а не под контролем. Всё понравилось: от общения до выезда. Квартира светлая окна во двор. Есть всё даже утюг и гладильная доска. Насчёт чистоты вообще никаких нареканий. Идеально. снять квартиру с детьми

  15. omeprazole over the counter: omeprazole generic – prilosec generic

  17. Рок Hard Rock А с другой стороны – мощный напор hard rock взрывающийся шквалом гитарных риффов и громогласных барабанов. Hard Rock – это квинтэссенция энергии и драйва гимн силе духа и непоколебимости. Это музыка заряжающая адреналином дающая силы для борьбы и преодоления любых препятствий.

  20. Gastro Health Monitor prilosec side effects prilosec side effects

  24. Nausea Care US: generic for zofran – zofran generic

  25. Уютная 1-к квартира в Могилеве с новой мебелью и техникой. Дом после капремонта. Тихие соседи. Только с гражданством РБ. Квартира на сутки недорого Сморгонь Студия в Витебске у реки. Современный дизайн smart-техника кондиционер. Все включено в цену. Для ответственных. квартира посуточно сморгонь Спросите о магазинах и аптеках рядом. Информация «рядом есть все» неконкретна. Лучше если хозяин сразу подскажет ближайшие 24/7 магазины. квартира в сморгони ежедневно

  30. Хотите уверенность в себе? Забудьте о скучных стенах спортзала Ваша крепкая спина ждут вас на свежем воздухе. Культивация земли мотоблоком — это не просто рутина а активный отдых с жиросжиганием. Как это работает? Подробнее на странице – https://sport-i-dieta.blogspot.com/2025/04/ogorod-hudenie-s-motoblokom-i-bez-nego.html Мощные мышцы ног и ягодиц: Управляя мотоблоком вы постоянно идете по рыхлой земле совершая работу на сопротивление. Это равносильно выпадам с утяжелением. Стальной пресс и кор: Удержание руля и контроль направления заставляют напрягаться ваш корпус. Каждая кочка — это микро-скручивание. Рельефные руки и плечи: Повороты подъемы развороты тяжелой техники — это настоящая функциональная тренировка в чистом виде. Запустите анимацию правильной стойки: Мы покажем как превратить работу в эффективную тренировку. Ваш план похудения на грядках: Разминка 5 минут: Прогулка быстрым шагом по участку. Кликните на иконку чтобы увидеть полный комплекс. Основная “тренировка” 60-90 минут: Вспашка культивация окучивание. Чередуйте интенсивность Заминка и растяжка 10 минут: Глубокое дыхание для восстановления. Пролистайте галерею с примерами упражнений. Мотивационный счетчик: За час активной работы с мотоблоком средней мощности вы можете сжечь от 400 до 600 ккал Это больше чем занятие на эллипсоиде. Итог: Прекрасный урожай осенью. Поделитесь своим прогрессом в соцсетях с хештегом #ФитнесНаГрядках. Пашите не только землю но и лишние калории

  37. US Meds Outlet escrow pharmacy canada legal online pharmacy coupon code

  40. top 10 pharmacies in india: Indo-Generic Export – top 10 online pharmacy in india

  48. Eline sağlık. Bu konuda merak ediyordum ve nihayet kapsamlı bir kaynak buldum. En çok verilen örnekler beni memnun etti. Bu gibi faydalı paylaşımların sürmesini umuyorum. Takipte kalacağım. Paylaşım için teşekkürler!

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>