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

  1. Aktual Pin Up giriş ünvanını axtarırsınızsa bura baxa bilərsiniz. Bloklanmayan link vasitəsilə hesabınıza girin və oynamağa başlayın. Xoş gəldin bonusu sizi gözləyir. Keçid: Pin-Up Casino hamıya bol şans.

  4. Salam dostlar əgər siz etibarlı kazino axtarırsınızsa məsləhətdir ki Pin Up saytını yoxlayasınız. Yüksək əmsallar və rahat pul çıxarışı burada mövcuddur. İndi qoşulun və bonus qazanın. Daxil olmaq üçün link: Pin Up Azerbaijan uğurlar hər kəsə

  8. Online slot oynamak isteyenler için rehber niteliğinde bir site: en iyi casino siteleri Hangi site güvenilir diye düşünmeyin. Editörlerimizin seçtiği bahis siteleri listesi ile sorunsuz oynayın. Detaylar linkte.

  9. Merhaba arkadaşlar güvenilir casino siteleri arıyorsanız bu siteye mutlaka göz atın. Lisanslı firmaları ve fırsatları sizin için inceledik. Dolandırılmamak için doğru adres: siteyi incele iyi kazançlar.

  10. Salamlar əgər siz yaxşı kazino axtarırsınızsa məsləhətdir ki Pin Up saytını yoxlayasınız. Ən yaxşı slotlar və sürətli ödənişlər burada mövcuddur. İndi qoşulun və bonus qazanın. Sayta keçmək üçün link: https://pinupaz.jp.net/# Pin Up AZ uğurlar hər kəsə

  15. Selamlar güvenilir casino siteleri arıyorsanız hazırladığımız listeye kesinlikle göz atın. En iyi firmaları ve fırsatları sizin için listeledik. Güvenli oyun için doğru adres: mobil ödeme bahis bol şanslar.

  22. Online slot oynamak isteyenler için kılavuz niteliğinde bir site: casino siteleri Hangi site güvenilir diye düşünmeyin. Onaylı casino siteleri listesi ile sorunsuz oynayın. Tüm liste linkte.

  24. Selamlar ödeme yapan casino siteleri bulmak istiyorsanız hazırladığımız listeye kesinlikle göz atın. Lisanslı firmaları ve bonusları sizin için listeledik. Dolandırılmamak için doğru adres: casino siteleri iyi kazançlar.

  27. Situs Bonaslot adalah bandar judi slot online nomor 1 di Indonesia. Ribuan member sudah merasakan Jackpot sensasional disini. Transaksi super cepat kilat. Link alternatif п»їbonaslotind.us.com jangan sampai ketinggalan.

  31. Pin-Up AZ ölkəmizdə ən populyar platformadır. Burada çoxlu slotlar və Aviator var. Pulu kartınıza anında köçürürlər. Mobil tətbiqi də var telefondan oynamaq çox rahatdır. Giriş linki https://pinupaz.jp.net/# Pin Up AZ baxın.

  33. Aktual Pin Up giriş ünvanını axtarırsınızsa doğru yerdesiniz. Bloklanmayan link vasitəsilə hesabınıza girin və qazanmağa başlayın. Pulsuz fırlanmalar sizi gözləyir. Keçid: https://pinupaz.jp.net/# Pin Up uğurlar.

  39. 中職賽程粉絲必備的資訊平台，結合智能AI預測系統提供最即時的中職賽程新聞、球員數據分析，以及專業的比賽預測。

  40. Zahnprobleme? dental clinic bar montenegro Diagnostik Kariesbehandlung Implantate Zahnaufhellung und Prophylaxe. Wir bieten Ihnen einen angenehmen Termin sichere Materialien moderne Technologie und kummern uns um die Gesundheit Ihres Lachelns.

  41. 11 пицца куба пицца рязань официальный

  42. сайт доставки пиццы пицца калуга доставка

  44. п»їSalam Gacor lagi nyari situs slot yang gacor? Coba main di Bonaslot. Winrate tertinggi hari ini dan terbukti membayar. Deposit bisa pakai Pulsa tanpa potongan. Login disini: п»їhttps://bonaslotind.us.com/# Bonaslot daftar salam jackpot.

  45. Aktual Pin Up giriş ünvanını axtarırsınızsa bura baxa bilərsiniz. Bloklanmayan link vasitəsilə hesabınıza girin və qazanmağa başlayın. Pulsuz fırlanmalar sizi gözləyir. Keçid: sayta keçid qazancınız bol olsun.

  47. поисковое продвижение москва профессиональное продвижение сайтов поисковое продвижение москва профессиональное продвижение сайтов .

  49. Salam dostlar siz də keyfiyyətli kazino axtarırsınızsa məsləhətdir ki Pin Up saytını yoxlayasınız. Yüksək əmsallar və sürətli ödənişlər burada mövcuddur. Qeydiyyatdan keçin və bonus qazanın. Daxil olmaq üçün link: ətraflı məlumat uğurlar hər kəsə

  50. Yeni Pin Up giriş ünvanını axtarırsınızsa bura baxa bilərsiniz. İşlək link vasitəsilə qeydiyyat olun və qazanmağa başlayın. Pulsuz fırlanmalar sizi gözləyir. Keçid: https://pinupaz.jp.net/# Pin Up rəsmi sayt qazancınız bol olsun.

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>