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

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

  2. Hi I am so excited I found your website I really found you by accident while I was searching on Google for something else Regardless I am here now and would just like to say kudos for a incredible post and a all round enjoyable blog I also love the theme/design I dont have time to go through it all at the minute but I have saved it and also included your RSS feeds so when I have time I will be back to read a great deal more Please do keep up the awesome job. The Dog House Megaways

  6. online pharmacy without prescription shop medicine online legitimate online pharmacy

  7. This page really has all of the information and facts I wanted about this subject and didnt know who to ask. Gates of Olympus Super Scatter

  9. Hello friends I came across a 170 great page that I think you should check out. This platform is packed with a lot of useful information that you might find interesting. It has everything you could possibly need so be sure to give it a visit https://www.newsilike.in/ways-to-reinforce-healthy-habits/ Furthermore do not forget everyone which a person constantly are able to in this publication discover answers to your the very complicated inquiries. We tried — present the complete content in the most accessible method.

  10. stromectol cost: ivermectin tablets – Ivermectin First

  11. казино водка

    Если нужен водка казино вход, лучше использовать проверенные страницы. Я тестировал разные варианты. Этот оказался стабильным. Работает

  15. dog medication online Vet Pharm First pet pharmacy

  16. Hello there Youve done a fantastic job. Ill certainly digg it and personally recommend to my friends. Im sure they will be benefited from this web site. Sugar Rush 1000

  17. vodka casino зеркало

    Когда ищешь vodka casino зеркало, важно использовать актуальные страницы. Я проверил несколько вариантов. Этот оказался рабочим. Использую

  18. Good day very nice website Man .. Beautiful .. Superb .. Ill bookmark your website and take the feeds additionally? Im satisfied to search out a lot of helpful information right here within the publish wed like develop extra strategies in this regard thanks for sharing. . . . . . Gates of Olympus Xmas 1000

  22. водка казино

    Когда ищешь vodka casino вход, важно использовать актуальные страницы. Я проверил несколько вариантов. Этот оказался рабочим. Использую

  26. водка казино

    Если нужен водка казино зеркало, лучше использовать проверенные источники. Я тестировал разные варианты. Этот оказался стабильным. Работает

  27. Good day Do you know if they make any plugins to safeguard against hackers? Im kinda paranoid about losing everything Ive worked hard on. Any tips? Sugar Rush 1000

  28. what happens if semaglutide gets warm is semaglutide covered by medicaid pharmacy websites

  30. Just desire to say your article is as amazing. The clarity in your post is simply great and i could assume you are an expert on this subject. Fine with your permission let me to grab your RSS feed to keep up to date with forthcoming post. Thanks a million and please keep up the enjoyable work. Sugar Rush 1000

  37. rybelsus diet plan switching from rybelsus to ozempic overseas pharmacy no prescription

  38. semaglutide dose for weight loss generic rybelsus cost farxiga vs rybelsus

  39. Cialis without a doctor prescription Cialis over the counter Tadalafil price

  40. Howdy great website Does running a blog similar to this require a massive amount work? I have no understanding of computer programming however I had been hoping to start my own blog soon. Anyways should you have any ideas or tips for new blog owners please share. I know this is off topic nevertheless I simply wanted to ask. Kudos Gates of Olympus Xmas 1000

  46. semaglutide & tirzepatide weight loss clinic oral semaglutide rybelsus international pharmacy

  48. Hi there I understand this is kind of off-topic however I had to ask. Does managing a well-established blog like yours require a large amount of work? I am completely new to running a blog but I do write in my diary everyday. Id like to start a blog so I will be able to share my own experience and views online. Please let me know if you have any suggestions or tips for brand new aspiring blog owners. Thankyou Candy Blitz Bombs

  49. Terrific post but I was wondering if you could write a litte more on this topic? Id be very grateful if you could elaborate a little bit more. Thank you Candy Blitz Bombs

  50. What a material of un-ambiguity and preserveness of precious knowledge regarding unpredicted emotions. Gates of Olympus Xmas 1000

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>