JavaScript and ASP.NET User Controls

This is something that I encountered recently on my current project and it bugged me for a little while. So I decided to capture my experience and share it.

Two radio buttons control the enabling or disabling of entry fields. One radio button controls just one entry field (and it’s associated label) and the other one controls a group of four entry fields (with their associated labels). Those four entry fields have been bundled together as a user control. Let’s say all this is in a panel that’s enabled as a modal popup window with the help of an ASP.NET AJAX modal popup extender. You want to write some JavaScript to handle the behavior, maybe thinking that you can enable / disable the entry fields as a group by getting their container (the user control), retrieving them (with a getElementsByTagName ) and iterating over them.
Even though you can get a clientid for a user control, no html is generated for it. So using that id on the JavaScript side yields a null reference. You have to provide your own container. In my case the layout was organized using a table, so each set of controls was in its own cell that had already been assigned an id for css purposes. Once that was figured out the rest was easy.