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

  1. Hello anyone searching for a reliable drugstore to purchase prescription drugs hassle-free. Take a look at this site: naltrexone. Selling a wide range of meds with fast shipping. Good luck.

  6. best new zealand casino, new zealandn online casino sign up no deposit bonus and new casinos online uk, or fully cashable no deposit bonus
    australia

    My web page: bingo phrase for 33 (Courtney)

  7. Im gone to tell my little brother that he should also pay a visit this blog on regular basis to obtain updated from newest news update. byueuropaviagraonline

  8. If you are looking for I recommend this service here for fast USA shipping. Stop overpaying and save big.

  9. Good day Do you know if they make any plugins to protect against hackers? Im kinda paranoid about losing everything Ive worked hard on. Any tips? https://tltgkh.ru/

  12. Hi if you are looking for a trusted drugstore to order pills hassle-free. I recommend this site: prilosec. Selling generic tablets and huge discounts. Best regards.

  13. how to get free casino games (Edwin) to win on pokie machines australia, free 50 pokies no deposit sign up
    bonus united kingdom and new zealandn online pokies for
    real money, or poker bonus uk

  14. For a trusted source visit this reliable site pharmacy online for the best prices. Take control of your health safely.

  15. Сайдинг не выгорающий на солнце в Молодечно. Используем панели с защитой UV. Даже через 10 лет фасад будет выглядеть как новый. Это подтверждено испытаниями и отзывами клиентов. sayding-minsk.ru

  16. Hi its nice article on the topic of media print we all be aware of media is a enormous source of data. казино риобет

  21. Greetings anyone searching for a trusted drugstore to buy health products hassle-free. I found this pharmacy: toradol. Selling a wide range of meds and huge discounts. Thanks.

  22. hello there and thank you for your information – I have certainly picked up anything new from right here.
    I did however expertise some technical issues using this web site, since
    I experienced to reload the web site many times previous to I could get it to load properly.
    I had been wondering if your hosting is OK? Not that I am complaining, but sluggish
    loading instances times will very frequently affect your placement in google and can damage your high-quality score if advertising and marketing with Adwords.
    Well I’m adding this RSS to my e-mail and could look out for a lot more of your respective fascinating content.
    Make sure you update this again soon.

    My blog post: gambling recession proof [Patsy]

  23. top online pokies and how much do indian tribes make from
    casinos [Maple] united states pokies,
    united statesn no deposit free spins and gambling times usa,
    or fastest withdrawal online casino canada no deposit
    bonus

  30. It’s not my first time to visit this web
    page, i am visiting this web page dailly and get pleasant
    information from here daily.

    my webpage :: mod apk coin dozer casino (Roberta)

  35. Hey everyone I wanted to share a reliable online pharmacy to order pills online. I recommend this site: allopurinol. They offer generic tablets with fast shipping. Best regards.

  39. Сайдинг под бревно блок-хаус в Молодечно для ценителей русской классики. Дом будет выглядеть как сруб из дорогого оцилиндрованного бревна но без проблем с конопаткой и усадкой. Теплоизоляционные свойства такого фасада значительно выше. saydingminsk.ru

  46. Зеркало поворотное большое Трюмо с тремя зеркалами – возможность видеть себя со всех сторон.

  47. Hello anyone searching for a trusted health store to order prescription drugs online. Check out this pharmacy: methotrexate. Selling high quality drugs at the best prices. Best regards.

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>