Search code examples
asp.netradiobuttonlistselectedindexchanged

OnSelectedIndexChanged event of RadioButtonList is not firing


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

Solution

  • 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>