OnSelectedIndexChanged event of RadioButtonList is not firing

Question

I have a RadioButtonList in asp.net. I am trying to do a simple thing i.e. to display or hide a div on changing the radio buttons from the list.But the event OnSelectedIndexChanged is not firing. I am not getting the reason. This is the code

<asp:RadioButtonList ID="CityStateZip" runat="server" ForeColor="#333300" AutoPostBack="true" RepeatDirection="Horizontal"  Width="274px" CausesValidation="true" ValidationGroup="SchoolSearchGroup"  OnSelectedIndexChanged="CityStateZip_SelectedIndexChanged">
                <asp:ListItem  Value="1" Text="City and State" />
                <asp:ListItem Value="2" Text="Zip Code" />
</asp:RadioButtonList>
<div id="zipcodediv" runat="server" visible="false" style="margin-left:75px">
 code.........
</div>
<div id="citystatediv" runat="server" style="margin-left:75px; width: 708px;">
code........
</div>

Code behind

 protected void CityStateZip_SelectedIndexChanged(Object sender,EventArgs e)
    {           
        if (CityStateZip.SelectedValue == "1")
        {               
            zipcodediv.Visible = false;
            citystatediv.Visible = true;
        }
        if (CityStateZip.SelectedValue == "2")
        {                
            citystatediv.Visible = false;
            zipcodediv.Visible = true;
        }
    }

Lepton

Show us code how you bind the RadioButtonList – Quatre

You can make this clientside with Jquery/Javascript – Onega

@satinder singh ,thanks.But for some reason i can't use jquery/js – Lepton

@sami: this is not good practise to Pageload for just hiding divs – Onega

@sami, I checked your code and it work fine. :) – Stung

@Stung : yes code is fine, and for good practise it can done at clientside – Onega

Answer 1

This is how you can do on client side.
Add JQuery Script file in head tag and your javascript function function name here (selectValue)
Tested Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">

        function selectValue() {

            if (document.getElementById("CityStateZip_0").checked == true) {

                $("#divOne").show(100);
                $("#divTwo").hide(100);

            }

            if (document.getElementById("CityStateZip_1").checked == true) {

                $("#divOne").hide(100);
                $("#divTwo").show(100);

            } 
        }
    </script>

Html Marup:

  <div>
        <asp:RadioButtonList ID="CityStateZip" runat="server" onchange="return selectValue();"
            RepeatDirection="Horizontal">
            <asp:ListItem Value="1" Selected="True">City and State</asp:ListItem>
            <asp:ListItem Value="2">Zip Code</asp:ListItem>

        </asp:RadioButtonList>
    </div><br /><br />
        <div id="divOne">
            <h3>Div one...</h3>
            Enter your City State content
        </div>

        <div id="divTwo">
            <h3>Div two...</h3>
            Enter you Zip code content
        </div>

Onega

Thanks satinder singh.But OnSelectedIndexChanged="return dataSelect()" is showing some error(parse error) .i tried with a semicolon as like your code,it also showing the same error. – Lepton

@sami: its NOT OnSelectedIndexChanged its onchange – Onega

:What is ContentPlaceHolder1_CityStateZip_0 and ContentPlaceHolder1_CityStateZip_1 – Lepton

Its your item ContentPlaceHolder1_CityStateZip_0 ie City and State and ContentPlaceHolder1_CityStateZip_1 is Zip Code. ContentPlaceHolder1 becoz it palced under ContentPlaceHolder1 tag – Onega

And the two if condition is not working.Can u suggest any other idea for the same.Thanks for your wonderfull cooperation. – Lepton

No sir..It is not making any change. – Lepton

Have you applied jquery file – Onega

yes..U can see ur code updated by me.it now contains 3 alerts.alert("1") is only showing. – Lepton

<asp:RadioButtonList ID="CityStateZip" runat="server" ForeColor="#333300" RepeatDirection="Horizontal" Width="274px" CausesValidation="true" ValidationGroup="SchoolSearchGroup" onclick="javascript:divSelect();"> <asp:ListItem Value="citystate" Text="City and State" /> <asp:ListItem Value="zip" Text="Zip Code" /> </asp:RadioButtonList> – Lepton

@sami: Check out my update answer, I have tested on my pc and it works fines, Still you get problem let me know – Onega

Answer 2

I had the same problem as you and fixed it by adding AutoPostBack="true" to my RadioButtonList's definition in the ASPX. It appears you have that in your definition already, but for anyone else who comes in here after this might be all you need.

Lastex

Answer 3

While I agree with most of the answers that if this is simply what you are trying to do, then you should do it client side. However, if you are doing some a bit more complicated that requires server-side action, you need to first figure out why your function is not being called. While I am not an expert in this area, the first thing that I would look at is the protected call. Changing this to public might work for you. Everything else that I have looked at seems to be in order. Another piece of advice that I have for you is to check to see if your function is truly being called is to do something very simple, in your case, I would take out the if statements and see if this works: zipcodediv.Visible = false; citystatediv.Visible = true;

I use this technique whenever something is not being fired, or when I want to know when at what point the function is being fired or running into a problem.

Funicle

As the generated class for the ASPX page extends the code-behind's class, protected is appropriate and preferred, unless there's a(n ill-advised) need to also expose that handler to other classes. In my case I have set a breakpoint at the top of the method and still don't get the debugger stopping there. In fact, the pageload isn't happening at all upon selecting a new item in the RadioButtonList. Hmm. [Update: It started working for me as soon as I added AutoPostBack="true" to the control in the ASPX.] – Lastex

Answer 4

My guess is you could have set the visibility of controls you have placed inside the div as false. If yes then remove it and try again. If not then it would be helpful if you post the code you have put inside the div too because you don't have any other mistake in your code and so the problem must be within the div.

Misery

Answer 5

Try changing CausesValidation to "false", if its any validation issue.

Pr