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

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

  2. заказать кухню в спб по индивидуальному проекту заказать кухню в спб по индивидуальному проекту .

  7. Grandpasha giriş adresi arıyorsanız işte burada. Hızlı erişim için tıkla Grandpashabet 2026 Deneme bonusu bu sitede.

  9. Bahis severler selam Casibom uyeleri ad?na k?sa bir duyuru yapmak istiyorum. Herkesin bildigi uzere Casibom domain adresini erisim k?s?tlamas? nedeniyle surekli guncelledi. Giris problemi cekenler icin dogru yerdesiniz. Resmi Casibom guncel giris linki art?k paylas?yorum Casibom Paylast?g?m baglant? uzerinden direkt hesab?n?za girebilirsiniz. Ayr?ca kay?t olanlara sunulan yat?r?m bonusu kampanyalar?n? mutlaka kac?rmay?n. En iyi slot deneyimi icin Casibom tercih edebilirsiniz. Herkese bol sans dilerim.

  12. купить кухню в спб от производителя купить кухню в спб от производителя .

  15. кухни на заказ в санкт-петербурге кухни на заказ в санкт-петербурге .

  20. Arkadaşlar selam Casibom üyeleri adına önemli bir bilgilendirme yapmak istiyorum. Bildiğiniz gibi site domain adresini BTK engeli yüzünden tekrar değiştirdi. Erişim problemi yaşıyorsanız link aşağıda. Güncel Casibom giriş linki artık paylaşıyorum Hemen Oyna Bu link üzerinden vpn kullanmadan siteye girebilirsiniz. Ayrıca kayıt olanlara sunulan yatırım bonusu kampanyalarını mutlaka inceleyin. Güvenilir slot deneyimi için Casibom doğru adres. Tüm forum üyelerine bol kazançlar dilerim.

  23. Arkadaslar selam bu site oyuncular? icin onemli bir duyuru paylas?yorum. Malum platform adresini tekrar guncelledi. Erisim hatas? varsa endise etmeyin. Guncel Vay Casino giris adresi su an burada: https://vaycasino.us.com/# Bu link uzerinden direkt siteye erisebilirsiniz. Guvenilir bahis deneyimi icin Vay Casino tercih edebilirsiniz. Herkese bol kazanclar dilerim.

  27. заказать кухню в спб от производителя заказать кухню в спб от производителя .

  28. Herkese selam Casibom sitesi uyeleri ad?na onemli bir bilgilendirme yapmak istiyorum. Herkesin bildigi uzere site adresini BTK engeli yuzunden surekli degistirdi. Erisim hatas? cekenler icin dogru yerdesiniz. Son Casibom giris linki art?k asag?dad?r Casibom Guncel Paylast?g?m baglant? uzerinden direkt siteye girebilirsiniz. Ayr?ca kay?t olanlara verilen yat?r?m bonusu f?rsatlar?n? da inceleyin. Lisansl? slot deneyimi icin Casibom tercih edebilirsiniz. Herkese bol sans dilerim.

  30. Matbet güncel linki arıyorsanız işte burada. Sorunsuz için tıkla: Matbet Apk Canlı maçlar bu sitede. Arkadaşlar Matbet yeni adresi belli oldu.

  38. Matbet TV giris adresi laz?msa dogru yerdesiniz. Sorunsuz icin: T?kla Git Yuksek oranlar burada. Arkadaslar Matbet bahis yeni adresi ac?kland?.

  39. Модульные дома https://modulndom.ru под ключ: быстрый монтаж продуманные планировки и высокое качество сборки. Подходят для круглогодичного проживания отличаются энергоэффективностью надежностью и возможностью расширения.

  41. Dostlar selam bu site kullanıcıları için kısa bir duyuru paylaşıyorum. Malum site adresini tekrar değiştirdi. Giriş sorunu yaşıyorsanız panik yapmayın. Yeni siteye erişim adresi artık aşağıdadır: Vay Casino Paylaştığım bağlantı ile direkt siteye girebilirsiniz. Güvenilir casino deneyimi sürdürmek için Vay Casino tercih edebilirsiniz. Tüm forum üyelerine bol kazançlar temenni ederim.

  42. Herkese merhaba Vay Casino oyuncuları için kısa bir bilgilendirme paylaşıyorum. Malum site adresini tekrar güncelledi. Giriş sorunu varsa endişe etmeyin. Çalışan Vaycasino giriş adresi artık aşağıdadır: https://vaycasino.us.com/# Paylaştığım bağlantı ile doğrudan hesabınıza erişebilirsiniz. Güvenilir bahis deneyimi sürdürmek için Vay Casino tercih edebilirsiniz. Herkese bol şans temenni ederim.

  44. Matbet giris adresi laz?msa iste burada. H?zl? icin: Matbet Mobil Yuksek oranlar burada. Arkadaslar Matbet bahis yeni adresi ac?kland?.

  45. Gençler Grandpashabet yeni adresi açıklandı. Adresi bulamayanlar buradan giriş yapabilir Grandpashabet İndir

  47. Herkese merhaba Vaycasino kullan?c?lar? ad?na k?sa bir bilgilendirme yapmak istiyorum. Malum platform adresini tekrar guncelledi. Giris sorunu varsa panik yapmay?n. Son siteye erisim adresi su an burada: Vay Casino Guncel Adres Paylast?g?m baglant? ile dogrudan siteye girebilirsiniz. Lisansl? casino deneyimi icin Vay Casino tercih edebilirsiniz. Tum forum uyelerine bol sans dilerim.

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>