How to hide panel when radio button is selected

SIVA

14y13k.NET

Dear All,

I have webform with 4radio buttons as options & with 4panels. & view button

Initially all panels are in disable mode.

When i select 1st radion button 1st panel will be visible mode & if i select 2nd one then 2nd panel so on.

finally when i click view button i need to identify which option is selected so that i need to perform some operations.

In which event i need to write & how to do this?

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

SIVA14y ago
Thanks,

nice sharing...
Senthilkumar14y ago
Hi,

If you have limited options then you can have radiobutton.
otherwise go for radiobuttonlist control.

In design page,

oncheckedchanged="rdb1_CheckedChanged" />
oncheckedchanged="rdb2_CheckedChanged" />
oncheckedchanged="rdb3_CheckedChanged" />
oncheckedchanged="rdb4_CheckedChanged" />

Panel1
Panel2
Panel3
Panel4

In the code file,

protected void rdb1_CheckedChanged(object sender, EventArgs e)
{
panel1.Visible = true;
panel2.Visible = false;
panel3.Visible = false;
panel4.Visible = false;
}
protected void rdb2_CheckedChanged(object sender, EventArgs e)
{
panel1.Visible = false;
panel2.Visible = true;
panel3.Visible = false;
panel4.Visible = false;
}
protected void rdb3_CheckedChanged(object sender, EventArgs e)
{
panel1.Visible = false;
panel2.Visible = false;
panel3.Visible = true;
panel4.Visible = false;
}
protected void rdb4_CheckedChanged(object sender, EventArgs e)
{
panel1.Visible = false;
panel2.Visible = false;
panel3.Visible = false;
panel4.Visible = true;
}

Using javascript:

/>
/>
/>
/>

Panel1
Panel2
Panel3
Panel4

function ShowPanel(id)
{
switch(id)
{
case 1:
document.getElementById('panel1').style.display='';
document.getElementById('panel2').style.display='none';
document.getElementById('panel3').style.display='none';
document.getElementById('panel4').style.display='none';
break
case 2:
document.getElementById('panel1').style.display='none';
document.getElementById('panel2').style.display='';
document.getElementById('panel3').style.display='none';
document.getElementById('panel4').style.display='none';
break
case 3:
document.getElementById('panel1').style.display='none';
document.getElementById('panel2').style.display='none';
document.getElementById('panel3').style.display='';
document.getElementById('panel4').style.display='none';
break
case 4:
document.getElementById('panel1').style.display='none';
document.getElementById('panel2').style.display='none';
document.getElementById('panel3').style.display='none';
document.getElementById('panel4').style.display='';
break
}
return false;
}
Satyapriya Nayak14y ago
Hi Siva,

Try this...

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="WebApplication13.WebForm4" %>

    Untitled Page





             oncheckedchanged="RadioButton1_CheckedChanged" />

             oncheckedchanged="RadioButton2_CheckedChanged" />

              oncheckedchanged="RadioButton3_CheckedChanged" />

               oncheckedchanged="RadioButton4_CheckedChanged" />

    Panel1
    Panel2
    Panel3
    Panel4





using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

namespace WebApplication13
{
    public partial class WebForm4 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Panel1.Visible = false;
            Panel2.Visible = false;
            Panel3.Visible = false;
            Panel4.Visible = false;
        }

        protected void RadioButton1_CheckedChanged(object sender, EventArgs e)
        {
            if(RadioButton1.Checked==true)
            {
                Panel1.Visible=true;
            }

            RadioButton2.Checked = false;
            RadioButton3.Checked = false;
            RadioButton4.Checked = false;
        }

        protected void RadioButton2_CheckedChanged(object sender, EventArgs e)
        {
            if (RadioButton2.Checked == true)
            {
                Panel2.Visible = true;
            }

            RadioButton1.Checked = false;
            RadioButton3.Checked = false;
            RadioButton4.Checked = false;
        }

        protected void RadioButton3_CheckedChanged(object sender, EventArgs e)
        {
            if (RadioButton3.Checked == true)
            {
                Panel3.Visible = true;
            }
            RadioButton1.Checked = false;
            RadioButton2.Checked = false;
            RadioButton4.Checked = false;
        }

        protected void RadioButton4_CheckedChanged(object sender, EventArgs e)
        {
            if (RadioButton4.Checked == true)
            {
                Panel4.Visible = true;
            }
            RadioButton1.Checked = false;
            RadioButton2.Checked = false;
            RadioButton3.Checked = false;
        }
    }
}

Thanks