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

  4. bacterial infection medication: bacterial infection medication – fast delivery amoxicillin usa

  5. stromectol medicine: stromectol delivery united states – ivermectin treatment tablets

  10. капсульные дома для круглогодичного проживания Капсульные дома — это компактные и современные решения для проживания идеально подходящие для круглогодичного использования предлагающие уникальное сочетание комфорта и функциональности

  11. МайПсиХелс МайПсиХелс MyPsyHealth — это сеть частных клиник специализирующихся на комплексном лечении психических расстройств неврологических заболеваний и зависимостей

  12. Hi superb blog Does running a blog similar to this require a large amount of work? Ive virtually no understanding of computer programming but I had been hoping to start my own blog soon. Anyways should you have any recommendations or tips for new blog owners please share. I know this is off topic but I simply wanted to ask. Thank you https://tayger.com.ua/vidnovlennya-skla-far-elektrokara-test-na.html

  16. ivermectin oral tablets usa: stromectol delivery united states – ivermectin treatment tablets

  19. ultras football Эти группы зачастую организованные и дисциплинированные превращают трибуны в эпицентр зрелища где рев толпы пиротехника и гигантские баннеры сливаются в единый пульсирующий организм.

  21. amoxil 500mg tablets usa: trusted antibiotic pharmacy usa – amoxil fast

  29. клиника неврологии МайПсиХелс MyPsyHealth — это сеть частных клиник специализирующихся на комплексном лечении психических расстройств неврологических заболеваний и зависимостей

  30. bacterial infection medication: generic amoxicillin online – amoxicillin 1000 mg capsule

  31. ivermectin oral tablets usa: stromectol oral – ivermectin tablets online

  36. капсульный дом хабаровск Если вы ищете капсульный дом для глэмпинга рассматриваете вариант строительства своими руками или интересуетесь готовыми решениями от производителей таких как Ulysse или Wellhouse рынок предлагает широкий выбор для разных бюджетов и потребностей.

  38. частная клиника неврологии Наши услуги доступны для всех кто ищет качественное и платное лечение гарантируя конфиденциальность и индивидуальный подход

  39. ivermectin uk: ivermectin fast – ivermectin treatment tablets

  40. stromectol 3mg cost: stromectol delivery united states – stromectol without prescription usa

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

  48. prednisone 5mg coupon: prednisone 5084 – online order prednisone

  49. trusted ivermectin pharmacy: stromectol delivery united states – ivermectin 6

  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>