Attaching client-side event handler to radio button list
Read the article on my new blog under http://blog.js-development.com/2008/06/attaching-client-side-event-handler-to.html
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.
13 Comments:
this is very nice blog...
this is very helpful and attractive biog.
visit for asp.net help asp.net help
Thank you :)
asp.net help seems also to be quite interesting. I've already added its RSS feed to GReader.
great post! helpful tip.
gr8 workaround ! keep on posting such good tricks :):):)
Exactly what i wanted but cant make it work.
For listitem it does not show me onclick as a valid argument.
thanks..Loki.
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"..
I have been looking for a way to do this for awhile thanks
rubbish
worked well with IE, But FF not working !!!
I didn't verify it explicitly, but it should work in FF. Did you try to check for any errors using Firebug for instance?
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?
@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?
@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