ASP.NET Radiobuttonlist Onclientclick

September 27, 2022 Post a Comment

I've noticed there is no OnClientClick() property for the radiobuttonlist in the ASP.NET control set. Is this a purposeful omissiong on Microsoft's part? Anyway, I've tried to add

Solution 1:

I found I could just add a onclick attribute to the RadioButtonList and it would fire the javascript client side as expected.

<asp:RadioButtonList ID="RadioButtonList1" runat="server" onclick="alert('RadioButtonListSelectChange');">
    <asp:ListItem Text="One" Value="1"/>
    <asp:ListItem Text="Two" Value="2"/>
</asp:RadioButtonList>

You could then write a client script that could determine the currently selected list item.

Solution 2:

The onclick attribute function very good in ListItem object. Try in this way:

li.Attributes.Add("onclick", "javascript:showDiv()")

That function to me.

Solution 3:

Not really an answer but a few weird observations on the other suggestions. I'll preface this by saying this is a RadioButtonList in an ASP.Net 4.0 app with RepeatDirection=Vertical

1) Adding onclick='myJsFunction(this);' attributes to the ListItems worked fine for me except after a different item on the page causes a post back (a button action for example), the attributes on the ListItems don't get rendered in the result of the postback. They get rendered to start, but not when there's a button action. Go figure.

2) Apparently our legacy code was relying on some murky, less than canonical behavior on the RadioButtonList/ListItem that gets very muddy on postback. If you put an id attribute on a ListItem, ASP.Net 2.0+ will add a span tag around the radio button and put your id value there. If you add an onclick attribute on it, that will go on the radio button - at least when Page.IsPostBack == false.

<asp:RadioButtonList  ID="proceedChoice" runat="server" RepeatDirection="Vertical">
    <asp:ListItem id="Close_Case_Y" Value="Y" onclick="SelectResolveType(this);" Text="I want to close this case."  runat="server" />
    <asp:ListItem id="Close_Case_N" Value="N" onclick="SelectResolveType(this);" Text="I want to cancel this and start over."  runat="server" />
</asp:RadioButtonList>

renders as

<table id="...proceedChoice" border="0">
<tr>
    <td><span id="Close_Case_Y"><input id="..._proceedChoice_0" type="radio" value="Y" onclick="SelectResolveType(this);" /><label for="..._proceedChoice_0">I want to close this case.</label></span></td>
</tr><tr>
    <td><span id="Close_Case_N"><input id="..._proceedChoice_1" type="radio" value="N" onclick="SelectResolveType(this);" /><label for="..._proceedChoice_1">I want to cancel this case and start over.</label></span></td>
</tr>
</table>

After a postback from some other button, though the same template renders as

<table id="...proceedChoice" border="0">
<tr>
    <td><input id="..._proceedChoice_0" type="radio" value="Y" /><label for="..._proceedChoice_0">I want to close this case.</label></td>
</tr><tr>
    <td><input id="..._proceedChoice_1" type="radio" value="N" /><label for="..._proceedChoice_1">I want to cancel this case and start over.</label></td>
</tr>
</table>

But here's where it gets really weird: if you tack on other attributes to ListItem other than id and onclick, just those attributes get preserved. For example if I add hidden="hidden" to one of the ListItems, it gets rendered like this after postback

<table id="...proceedChoice" border="0">
<tr>
    <td><span hidden="hidden"><input id="..._proceedChoice_0" type="radio" value="Y" /><label for="..._proceedChoice_0">I want to close this case.</label></span></td>
</tr><tr>
    <td><input id="..._proceedChoice_1" type="radio" value="N" /><label for="..._proceedChoice_1">I want to cancel this case and start over.</label></td>
</tr>
</table>

Solution 4:

Because it's a list control, there isn't a OnClientClick event. Either use a postback (SelectedIndexChange) or write javascript to grab the click for each radio button.

Solution 5:

            foreach (PlaceType t in query.ToList())
        {

            ListItem li = new ListItem(@"<img src=""" + t.ImageRelativePath + @"""/><br/>" + t.PlaceTypeText, t.PlaceTypeID.ToString());
            li.Attributes.Add("onclick", "javascript:placeTypeChange('" + t.ImageRelativePath + "')");
            rblPlaceTypes.Items.Add(li);
        }

So in there I'm

a) Iterating over the results of a EF query. b) Creating a new list item, and adding it to my radio button list (rblPlaceTypes). c) The constructor is putting an image in so that displays. d) the li.Attributs.Add is putting the javascript wireup in.

JavaScript Guide