How to use RadioButtonList to show/hide div - asp.net

Question

I have RadioButtonList with 3 option :
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem Text="SearchByName" Value="1"></asp:ListItem>
<asp:ListItem Text="SearchByDate" Value="2"></asp:ListItem>
<asp:ListItem Text="SearchByValue" Value="3"></asp:ListItem>
</asp:RadioButtonList>
and I have 3 divs each one have some textboxes and button to make some search.
How can I use radiobuttonlist and when i check some radio only one div shows

Answer 1

You have two approaches to this, you can either do it in the client side, or you can do it on the server side, depending on your needs:
Server Side Solution: You need to add the AutoPostBack property of your RadioButtonList to true, and the divs will have the runat property set to server
Markup:
<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" onselectedindexchanged="RadioButtonList1_SelectedIndexChanged">
<asp:ListItem Text="SearchByName" Value="1"></asp:ListItem>
<asp:ListItem Text="SearchByDate" Value="2"></asp:ListItem>
<asp:ListItem Text="SearchByValue" Value="3"></asp:ListItem>
</asp:RadioButtonList>
<div id="myDiv1" runat="server" visible="false">Div Content</div>
Code behind:
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
if (this.RadioButtonList1.SelectedValue =="2")
this.myDiv1.Visible = true;
else
this.myDiv1.Visible = false;
}
Client Side Solution:
Javascript:
window.onload = function () {
var inputs = document.getElementsByTagName("input");
if (inputs.length > 0) {
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "radio") {
inputs[i].onclick = function () {
if (this.value == "2") {
document.getElementById("div1").style.display = "block";
}
else {
document.getElementById("div1").style.display = "none";
}
}
}
}
}
}
Markup:
<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="True" >
<asp:ListItem Text="SearchByName" Value="1"></asp:ListItem>
<asp:ListItem Text="SearchByDate" Value="2"></asp:ListItem>
<asp:ListItem Text="SearchByValue" Value="3"></asp:ListItem>
</asp:RadioButtonList>
<div id="div1" style="display:none">Div Content</div>
Of course this will get all of the radio buttons in the page, so you may want to make sure that you got the right ones.

Answer 2

Better you use Client Side Script for this type of Actions...
I have written the below code using JQuery try that...
JQuery :
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$('#RadioButtonList1 input').click(function () {
var value = $('#RadioButtonList1 input:checked').val();
if (value == 1) {
$("#divName").show();
$("#divDate").hide();
$("#divValue").hide();
}
if (value == 2) {
$("#divName").hide();
$("#divDate").show();
$("#divValue").hide();
}
if (value == 3) {
$("#divName").hide();
$("#divDate").hide();
$("#divValue").show();
}
});
});
</script>
HTML :
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem Text="SearchByName" Value="1"></asp:ListItem>
<asp:ListItem Text="SearchByDate" Value="2"></asp:ListItem>
<asp:ListItem Text="SearchByValue" Value="3"></asp:ListItem>
</asp:RadioButtonList>
<div id="divName">Search By Name</div>
<div id="divDate">Search By Date</div>
<div id="divValue">Search By Value</div>

Answer 3

You have to set the AutoPostback = "true", handle the OnSelectedIndexChanged event and then show/hide the appropriate div in code behind. Something like this:
<asp:RadioButtonList AutoPostBack="True"
OnSelectedIndexChanged="Index_Changed" ID="RadioButtonList1" runat="server">
<asp:ListItem Text="SearchByName" Value="1"></asp:ListItem>
<asp:ListItem Text="SearchByDate" Value="2"></asp:ListItem>
<asp:ListItem Text="SearchByValue" Value="3"></asp:ListItem>
</asp:RadioButtonList>
protected void Index_Changed(Object sender, EventArgs e)
{
if(RadioButtonList1.SelectedIte.Value=="1")
{
div1.Visible=true;
div2.Visible=false;
div3.Visible=false;
else if(RadioButtonList1.SelectedIte.Value=="2")
{
div2.Visible=true;
//and so on...
}
}
Obviously, the divs themselves, must be server-side controls, so you must declared them like so:
<div id="div1" runat="server">
content here
</div>