how to display divs based on radio button checked.

Question

5.00/5 (2 votes)

See more:

i am having two radio buttons and baving two different divs i want to display one div at a time based on radio buttons list value how to do it thanks for ur help...

<asp:RadioButtonList ID="RadioButtonList1" runat="server" ForeColor="White" BackColor="red" RepeatDirection="Horizontal"  >
                        <asp:ListItem Selected="True" Text="Movie"></asp:ListItem>
                        <asp:ListItem Text="Theater"></asp:ListItem>
                   </asp:RadioButtonList>

XML

                           <img alt="" src="newsite/old1.jpg" title="" />
   <img alt="" src="newsite/old2.jpg" title="" />
</div></div></div>

Posted 28-Nov-13 19:03pm

teja sai ravi

Updated 28-Nov-13 19:30pm

JoCodes

v4

Add a Solution

6 solutions

Solution 6

XML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function ToggleDiv() {
            var radios = document.getElementsByName('RadioButtonList1');
            for (var i = 0, length = radios.length; i < length; i++) {
                if (radios[i].checked) {
                    if (radios[i].value == "Movie") {

                        document.getElementById("DivA").style.display = "block";
                        document.getElementById("DivB").style.display = "none";
                    } else {
                        document.getElementById("DivA").style.display = "none";
                        document.getElementById("DivB").style.display = "block";
                    }
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal"
            onchange="ToggleDiv();">
            <asp:ListItem Selected="True" Text="Movie"></asp:ListItem>
            <asp:ListItem Text="Theater"></asp:ListItem>
        </asp:RadioButtonList>
        <div id="DivA" >
            This is Div Movie
        </div>
        <div id="DivB" style="display:none;">
            This is Div Theater
        </div>
    </div>
    </form>
</body>
</html>

Posted 28-Nov-13 21:05pm

Siddique Mahsood

Comments

teja sai ravi 30-Nov-13 5:52am

hi friend ur code working but it is automatically changing to movies div when iam accesing theatre div how can i resolve this?

Siddique Mahsood 2-Dec-13 0:23am

I cant find your situation. What means by accessing theatre div??

teja sai ravi 2-Dec-13 1:35am

hi friend iam having 3 drop downs in my movie div and 3 other drop downs in my theatre div when i select theatre button it is displaying theatre div but when i select a value from first drop down list it automatically changing to movie div...how to resolve it.

Siddique Mahsood 2-Dec-13 7:25am

Yes its due to postback, For maintaining it after postback you should also call the function on window load, simply call Current ToggleDiv function on window load as::
window.onload = function () { ToggleDiv(); };

Solution 4

you can do this using javascript for example

XML

function radio()
      {
          var radio_btn =document.getElementById('<%=RadioButtonList1.ClientID %>');
          var radio_btn_input =radio_btn.getElementsByTagName("input");
          var div_hide=document.getElementById('<%=div_id.ClientID %>');

          if(radio_btn_input[0].checked==true)
          {
            div_hide.style.display='block';
          }
          else
          {
          div_hide.style.display='none';
          }
      }
      after this in your source code

       <asp:RadioButtonList ID="RadioButtonList1" runat="server" onclick="return radio();" ForeColor="White" BackColor="red" RepeatDirection="Horizontal"  >
                        <asp:ListItem Selected="True" Text="Movie"></asp:ListItem>
                        <asp:ListItem Text="Theater"></asp:ListItem>
                   </asp:RadioButtonList>

Posted 28-Nov-13 20:07pm

Sumit_Pathak

Solution 3

If need to handle it server side then set the Autopostback property of Radiobuttonlist to true and
add the following event

C#

protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
{
    if (RadioButtonList1.SelectedValue =="2")
             {
                Div1.Visible = true;
                Div2.Visible = false;
             }
    else
             {
                Div1.Visible = false;
                Div2.Visible = true;
             }

}

Posted 28-Nov-13 19:52pm

JoCodes

Comments

teja sai ravi 29-Nov-13 2:19am

its not working friend....

JoCodes 29-Nov-13 2:25am

Change the selectedvalue accordingly. As per your markup code you need to check the if part using the selectedtext with Movie or theater

teja sai ravi 29-Nov-13 6:37am

conditions are working but it is not displaying the divs..

Solution 2

Here is solution to your problem using jquery

this is html code:

XML

<asp:RadioButtonList ID="RadioButtonList1" runat="server">
                   <asp:ListItem Value="1">AAAA</asp:ListItem>
                   <asp:ListItem Value="2">BBBB</asp:ListItem>
               </asp:RadioButtonList>

               <div id="Div1" style="visibility:hidden;">
               this is div 1
               </div>


               <div id="Div2" style="visibility:hidden;">
               this is div 2
               </div>

this is jquery code:

C#

$(function () {

          $("#RadioButtonList1").change(function () {
              var res = $('input[type="radio"]:checked').val();
              if (res == '1') {
                  $("#Div1").css("visibility","visible");
                  $("#Div2").css("visibility", "hidden");
              }
              else {

                  $("#Div1").css("visibility", "hidden");
                  $("#Div2").css("visibility", "visible");
              }

          });

      })

by default both div are hidden when you select a value from radiobuttonlist div's come visible accordingly

Posted 28-Nov-13 19:41pm

Er Daljeet Singh

Solution 1

Check below code

XML

<asp:RadioButtonList ID="RadioButtonList1" runat="server" ForeColor="White" BackColor="red"
    RepeatDirection="Horizontal">
    <asp:ListItem Selected="True" Text="Movie"></asp:ListItem>
    <asp:ListItem Text="Theater"></asp:ListItem>
</asp:RadioButtonList>
<div id="test1" style="display: none">
    first Div</div>
<div id="test2" style="display: none">
    second Div</div>
<script type="text/javascript">
    var rbAuth = "<%= RadioButtonList1.ClientID %>";

    $(document).ready(function () {
        $("#MainContent_RadioButtonList1").click(function () {

            if ($("#MainContent_RadioButtonList1_0").is(":checked")) {
                $("#test1").show();
                $("#test2").hide();
            }
            if ($("#MainContent_RadioButtonList1_1").is(":checked")) {
                $("#test1").hide();
                $("#test2").show();
            }

        })
    });
</script>

Posted 28-Nov-13 19:35pm

santhosh-padamatinti

Comments

teja sai ravi 29-Nov-13 2:13am

hi friend thanks for ur reply its not working plese help me in another way is i have to call function forcibly?

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

C For Code!!! · Accepted Answer · 2013-11-28T20:10:00

Check by following way
use follwoing markup

XML

<div id="div1" style="width:100px;height:100px;background-color:Aqua;display:none">
<p>Div First RED</p>
</div>
<div id="div2" style="width:100px;height:100px;background-color:Yellow;display:none">
<p>Div second BLUE </p>
</div>
     <asp:RadioButtonList ID="RadioButtonList1" runat="server" onchange="callfunction()">
     <asp:ListItem Value="1">opt1</asp:ListItem>
     <asp:ListItem Value="1">opt2</asp:ListItem>

    </asp:RadioButtonList>

and then use follwoing javascript

XML

<script>
    function callfunction() {

        var list = document.getElementById("<%=RadioButtonList1.ClientID %>");
        var inputs = list.getElementsByTagName("input");
        var inputtext = list.getElementsByTagName("label");
        var selected;
        for (var i = 0; i < inputs.length; i++) {
            if (inputs[i].checked) {
                selected = inputtext[i].innerHTML;
            }
        }
        if (selected == "opt1") {
            document.getElementById('div2').style.display = "none";
            document.getElementById('div1').style.display = "block";
        }
        else {
            document.getElementById('div1').style.display = "none";
            document.getElementById('div2').style.display = "block";
        }
    }
</script>

Hope This Helps!!!

how to display divs based on radio button checked.

6 solutions

Solution 6

Solution 5

Solution 4

Solution 3

Solution 2

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us