Juri Strumpflohner
Juri Strumpflohner Juri is a full stack developer and tech lead with a special passion for the web and frontend development. He creates online videos for Egghead.io, writes articles on his blog and for tech magazines, speaks at conferences and holds training workshops. Juri is also a recognized Google Developer Expert in Web Technologies

Attaching client-side event handler to radio button list

2 min read

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>

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>

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>

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
comments powered by Disqus