Dear reader of Juri's TechBlog,
I moved my blog to a new domain and a new hosting solution as well. I'm now blogging on juristr.com.

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.

Posts you might also be interested in..

Credits: Hoctro | Jack Book

13 Comments:

Tarok said...

this is very nice blog...
this is very helpful and attractive biog.
visit for asp.net help asp.net help

Juri Strumpflohner said...

Thank you :)
asp.net help seems also to be quite interesting. I've already added its RSS feed to GReader.

oudinia said...

great post! helpful tip.

Jahnavee Kaunal Gandhi said...

gr8 workaround ! keep on posting such good tricks :):):)

Anonymous said...

Exactly what i wanted but cant make it work.
For listitem it does not show me onclick as a valid argument.

thanks..Loki.

Juri Strumpflohner said...

Could you please specify in more detail what doesn't work? Does Visual Studio not show you the onClick as a valid argument? Because pay attention, the onClick here is not a server-side "OnClick"..

Francois said...

I have been looking for a way to do this for awhile thanks

Anonymous said...

rubbish

mohammed said...

worked well with IE, But FF not working !!!

Juri Strumpflohner said...

I didn't verify it explicitly, but it should work in FF. Did you try to check for any errors using Firebug for instance?

Anthony said...

Hi Juri,

Got this working in VS 2010 for ASP.NET 2.0+.

Hoever, it will not work with ASP.NET 1.1 in VS 2003 for some reason. onClick="someJavaScriptFunction();" does not appear in the markup when I view source. Any ideas?

Juri Strumpflohner said...

@Anthony:
No, actually I've no idea why this. You mean you place the onClick javascript function in your ASPX code and when you view the generated markup in your browser it isn't there?

Anthony said...

@Juri,

Apparently, HTML Option items cannot have an OnClick event. So to get around this, I placed the OnClick attribute in the main RadioButtonList tag as normal and coded it as follows to grab the appropriate input (http://bit.ly/9SfLLl):

var list = document.getElementById("produceDDL");
var inputs = list.getElementsByTagName("input");

var selected;
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].checked)
{
selected = inputs[i];
break;
}
}
//alert(selected.value);

Ironically, I had to revert to server-side handling (in my case) in order to make this Web-Accessible when JavaScript is disabled.

Post a Comment