Attaching client-side event handler to radio button list

If you want to react to changes on a ASP.net radio button list from the client side you have to attach the appropriate JavaScript event handler. So what you would do is something like

<asp:RadioButtonList ID="rbnDetPeriod" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal" onChange="someJavaScriptFunction();">
   <asp:ListItem Text="si" Value="SI" Selected="True"></asp:ListItem>
   <asp:ListItem Text="no" Value="NO"></asp:ListItem>
</asp:RadioButtonList>

You launch Firefox, test it and look there, it works! Great you think, that was easy and you proceed with your work. But don't be too naive. Did you check it on Internet Explorer, Safari?? No? So give it a try, I can guarantee you, it won't work. The usual cross browser compatibility problem.
If you take a closer look at the generated HTML code by the ASP.net page, you'll notice that your radio-button list above is rendered as follows:

<span id="ctl00_plhContent_ctlMissionStart_rbnDetPeriod" onchange="someJavaScriptFunction();">
   <input id="ctl00_plhContent_ctlMissionStart_rbnDetPeriod_0" type="radio" name="ctl00$plhContent$ctlMissionStart$rbnDetPeriod" value="SI" checked="checked" /><label for="ctl00_plhContent_ctlMissionStart_rbnDetPeriod_0">si</label>
   <input id="ctl00_plhContent_ctlMissionStart_rbnDetPeriod_1" type="radio" name="ctl00$plhContent$ctlMissionStart$rbnDetPeriod" value="NO" /><label for="ctl00_plhContent_ctlMissionStart_rbnDetPeriod_1">no</label>
</span>

Yes, as a span! Of course, an onChange handler won't work, although Firefox seems to support it, strange.. Anyway, what you have to do is to attach an onClick event on both of the radio buttons inside the list with a call to the same function such that you aspx code of your radio button list looks something like this:

<asp:RadioButtonList ID="rbnDetPeriod" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal" >
   <asp:ListItem Text="si" Value="SI" Selected="True" onClick="someJavaScriptFunction();" ></asp:ListItem>
   <asp:ListItem Text="no" Value="NO" onClick="someJavaScriptFunction();" ></asp:ListItem>
</asp:RadioButtonList>

The rest is obvious. Inside your Javascript function you check which radio button is checked and then you execute the action you have to.

---

Questions? Thoughts? Hit me up on Twitter