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;
        }
    }

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>

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.

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.

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.

Answer 5

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