www.webdeveloper.com
Results 1 to 9 of 9
  1. 09-18-2008, 09:12 AM #1
    JS=Freak
    JS=Freak is offline Registered User
    Join Date
    Mar 2006
    Posts
    49

    Show / Hide div based on Radio button

    Hey everyone,

    I need help. I have two divs I want to show or hide based on which radion button is selected. These are my buttons:

    Code:
    <input name="selection" type="radio" value="Silver Service" checked="checked" />
<input name="selection" type="radio" value="Gold Service" />
<input name="selection" type="radio" value="Platinum Service"/>
<input name="selection" type="radio" value="Diamond Service" />
    And these are my two divs:

    Code:
    <div id="courier">Select your courier:<br />
                    Blah blah....Dropdown to come here</div>
</p>
                    <div id="depot"><p>Select the closest depot for parcel drop-off: Blah blah....dropdown to come here
                                            </p></div>
    Basically the depot div must be visible by default and Silver service selected. But when Gold or Diamond service is selected, the courier div must show and the depot div hidden.

    Can anybody please help?




    Thanks!

    Karen
    Reply With Quote Reply With Quote
  2. 09-18-2008, 12:53 PM #2
    vwphillips
    vwphillips is online now Super Moderator
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,564
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function Test(rad){
 var rads=document.getElementsByName(rad.name);
 document.getElementById('courier').style.display=(rads[1].checked||rads[3].checked)?'none':'block';
 document.getElementById('depot').style.display=(rads[1].checked||rads[3].checked)?'block':'none';
}
/*]]>*/
</script></head>

<body>
<input name="selection" type="radio" value="Silver Service" checked="checked" onclick="Test(this);"/>
<input name="selection" type="radio" value="Gold Service"  onclick="Test(this);"/>
<input name="selection" type="radio" value="Platinum Service" onclick="Test(this);"/>
<input name="selection" type="radio" value="Diamond Service"  onclick="Test(this);"/>
<div id="courier">Select your courier:<br />
                    Blah blah....Dropdown to come here</div>
</p>
                    <div id="depot"><p>Select the closest depot for parcel drop-off: Blah blah....dropdown to come here
                                            </p></div>
</body>

</html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org.uk
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote
  3. 09-18-2008, 06:57 PM #3
    scottyd
    scottyd is offline Registered User
    Join Date
    Sep 2008
    Posts
    4
    try this too:

    http://javascript.internet.com/forms/field-show.html

    i am not too sure if that is also what you are look for as well.
    Reply With Quote Reply With Quote
  4. 09-19-2008, 02:09 AM #4
    JS=Freak
    JS=Freak is offline Registered User
    Join Date
    Mar 2006
    Posts
    49
    Vic,

    You are a rock star! It works perfectly!!!!!!!




    God bless!

    Karen
    Reply With Quote Reply With Quote
  5. 08-13-2012, 08:32 PM #5
    NuclearGeneral
    NuclearGeneral is offline Registered User
    Join Date
    Aug 2012
    Posts
    2
    Hello,

    I saw this the other day and have been trying to edit it to suit my needs, but it won't seem to do exactly as I need it to. I am trying to have it show 2 different sections from one radio button selection with a maximum of 4 radio buttons in all. Here is how I tried editing it:

    Code:
    <script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function HostingSpec(rad){
 var rads=document.getElementsByName(rad.name);
 document.getElementById('hosting_spec_1').style.display=(rads[1].checked||rads[2].checked||rads[3].checked||rads[4].checked)?'block':'none':'none':'none';
 document.getElementById('hosting_spec_1_1').style.display=(rads[1].checked||rads[2].checked||rads[3].checked||rads[4].checked)?'block':'none':'none':'none';
 document.getElementById('hosting_spec_2').style.display=(rads[2].checked||rads[1].checked||rads[3].checked||rads[4].checked)?'block':'none':'none':'none';
 document.getElementById('hosting_spec_2_2').style.display=(rads[2].checked||rads[1].checked||rads[3].checked||rads[4].checked)?'block':'none':'none':'none';
 document.getElementById('hosting_spec_3').style.display=(rads[3].checked||rads[1].checked||rads[2].checked||rads[4].checked)?'block':'none':'none':'none';
 document.getElementById('hosting_spec_3_3').style.display=(rads[3].checked||rads[1].checked||rads[2].checked||rads[4].checked)?'block':'none':'none':'none';
 document.getElementById('hosting_spec_4').style.display=(rads[4].checked||rads[1].checked||rads[2].checked||rads[3].checked)?'block':'none':'none':'none';
 document.getElementById('hosting_spec_4_4').style.display=(rads[4].checked||rads[1].checked||rads[2].checked||rads[3].checked)?'block':'none':'none':'none';
}
/*]]>*/
</script>
</head>

<body>

<TABLE>
   <TR>
      <TD>* Choose A Hosting Package:</TD>
      <TD><INPUT type="radio" name="hosting_package" id="hosting_package_1" value="1" class="validate[required] radio" onclick="HostingSpec(this);" />&nbsp;<BR />
          <INPUT type="radio" name="hosting_package" id="hosting_package_2" value="2" class="validate[required] radio" onclick="HostingSpec(this);" />&nbsp;<BR />
          <INPUT type="radio" name="hosting_package" id="hosting_package_3" value="3" class="validate[required] radio" onclick="HostingSpec(this);" />&nbsp;<BR />
          <INPUT type="radio" name="hosting_package" id="hosting_package_4" value="4" class="validate[required] radio" onclick="HostingSpec(this);" />&nbsp;</TD>
   </TR>
   <TR id="hosting_spec_1" style="display:none;">
      <TD></TD>
      <TD>Blah 1</TD>
   </TR>
   <TR id="hosting_spec_1_1" style="display:none;">
      <TD></TD>
      <TD>Blah 1-1</TD>
   </TR>
   <TR id="hosting_spec_2" style="display:none;">
      <TD></TD>
      <TD>Blah 2</TD>
   </TR>
   <TR id="hosting_spec_2_2" style="display:none;">
      <TD></TD>
      <TD>Blah 2-2</TD>
   </TR>
   <TR id="hosting_spec_3" style="display:none;">
      <TD></TD>
      <TD>Blah 3</TD>
   </TR>
   <TR id="hosting_spec_3_3" style="display:none;">
      <TD></TD>
      <TD>Blah 3-3</TD>
   </TR>
   <TR id="hosting_spec_4" style="display:none;">
      <TD></TD>
      <TD>Blah 4</TD>
   </TR>
   <TR id="hosting_spec_4_4" style="display:none;">
      <TD></TD>
      <TD>Blah 4-4</TD>
   </TR>
    Would someone be able to show me how to do this correctly?

    Thanks,
    -Don
    Reply With Quote Reply With Quote
  6. 08-13-2012, 08:36 PM #6
    NuclearGeneral
    NuclearGeneral is offline Registered User
    Join Date
    Aug 2012
    Posts
    2
    EDIT: Forgot to mention; I want the 1st radio button to show the hosting_spec_1 & hosting_spec_1_1 and radio button 2 to show hosting_spec_2 and so on and so forth for all 4 radio buttons.
    Reply With Quote Reply With Quote
  7. 08-14-2012, 04:53 AM #7
    vwphillips
    vwphillips is online now Super Moderator
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,564
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function HostingSpec(rad){
 var rads=document.getElementsByName(rad.name);
 var all=['hosting_spec_1','hosting_spec_1_1','hosting_spec_2','hosting_spec_2_2','hosting_spec_3','hosting_spec_3_3','hosting_spec_4','hosting_spec_4_4']
 var ary=[
  ['hosting_spec_1','hosting_spec_1_1'],
  ['hosting_spec_2','hosting_spec_2_2'],
  ['hosting_spec_3','hosting_spec_3_3'],
  ['hosting_spec_4','hosting_spec_4_4']
 ]
 for (var z0=0;z0<all.length;z0++){
  document.getElementById(all[z0]).style.display='none';
 }
 for (var z1a,z1=0;z1<rads.length;z1++){
  if (rads[z1].checked&&ary[z1]){
   for (z1a=0;z1a<ary[z1].length;z1a++){
    document.getElementById(ary[z1][z1a]).style.display='block';
   }
   return;
  }
 }

}
/*]]>*/
</script>
</head>

<body>
<TABLE>
   <TR>
      <TD>* Choose A Hosting Package:</TD>
      <TD><INPUT type="radio" name="hosting_package" id="hosting_package_1" value="1" class="validate[required] radio" onclick="HostingSpec(this);" />&nbsp;<BR />
          <INPUT type="radio" name="hosting_package" id="hosting_package_2" value="2" class="validate[required] radio" onclick="HostingSpec(this);" />&nbsp;<BR />
          <INPUT type="radio" name="hosting_package" id="hosting_package_3" value="3" class="validate[required] radio" onclick="HostingSpec(this);" />&nbsp;<BR />
          <INPUT type="radio" name="hosting_package" id="hosting_package_4" value="4" class="validate[required] radio" onclick="HostingSpec(this);" />&nbsp;</TD>
   </TR>
   <TR id="hosting_spec_1" style="display:none;">
      <TD></TD>
      <TD>Blah 1</TD>
   </TR>
   <TR id="hosting_spec_1_1" style="display:none;">
      <TD></TD>
      <TD>Blah 1-1</TD>
   </TR>
   <TR id="hosting_spec_2" style="display:none;">
      <TD></TD>
      <TD>Blah 2</TD>
   </TR>
   <TR id="hosting_spec_2_2" style="display:none;">
      <TD></TD>
      <TD>Blah 2-2</TD>
   </TR>
   <TR id="hosting_spec_3" style="display:none;">
      <TD></TD>
      <TD>Blah 3</TD>
   </TR>
   <TR id="hosting_spec_3_3" style="display:none;">
      <TD></TD>
      <TD>Blah 3-3</TD>
   </TR>
   <TR id="hosting_spec_4" style="display:none;">
      <TD></TD>
      <TD>Blah 4</TD>
   </TR>
   <TR id="hosting_spec_4_4" style="display:none;">
      <TD></TD>
      <TD>Blah 4-4</TD>
   </TR>
</body>

</html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org.uk
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote
  8. 10-09-2012, 09:52 AM #8
    Play01
    Play01 is offline Registered User
    Join Date
    Oct 2012
    Posts
    3
    Hello everybody, I have the same problem as previous posts:
    I have a radio input and I would like that depending on what you choose, it displays another checkbox selection.

    <input type="radio" name="food" value="Breakfast" />
    Breakfast
    <input type="radio" name="food" value="Lunch" />
    Lunch
    <input type="radio" name="food" value="Dinner" />
    Dinner

    I coded this:

    <script>
    $("input[name='food']").change(function(){
    if ($("input[name='food']:checked").val() == 'Breakfast')
    { $("p").show();}
    else if ($("input[name='food']:checked").val() == 'Lunch')
    { }
    else
    { }
    });
    </script>

    how could I do if I want to insert checkbox selecion into the if/else statements so that if i choose luch it shows me another checkbox selection with other fields??
    Thank you so much.
    Reply With Quote Reply With Quote
  9. 10-10-2012, 09:28 AM #9
    Play01
    Play01 is offline Registered User
    Join Date
    Oct 2012
    Posts
    3
    Quote Originally Posted by JS=Freak View Post
    Hey everyone,

    I need help. I have two divs I want to show or hide based on which radion button is selected. These are my buttons:

    Code:
    <input name="selection" type="radio" value="Silver Service" checked="checked" />
<input name="selection" type="radio" value="Gold Service" />
<input name="selection" type="radio" value="Platinum Service"/>
<input name="selection" type="radio" value="Diamond Service" />
    And these are my two divs:

    Code:
    <div id="courier">Select your courier:<br />
                    Blah blah....Dropdown to come here</div>
</p>
                    <div id="depot"><p>Select the closest depot for parcel drop-off: Blah blah....dropdown to come here
                                            </p></div>
    Basically the depot div must be visible by default and Silver service selected. But when Gold or Diamond service is selected, the courier div must show and the depot div hidden.

    Can anybody please help?




    Thanks!

    Karen


    What's the code with 3 imput radio and 3 different div similar to this example but with every hidden div for default??
    Thank you
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules

 HTML5 Development Center



Recent Articles