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