Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Radio button that when clicked will display dropdown list

    I have created a dropdown list that will display a textbox when I click on blank. I am trying to figure out how to show/hide the dropdown box until I click a radio button. Any help would be appreciated. (this is what I have so far)

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <body>
    <script type="text/javascript" charset="utf-8"> 
    function checkForBlank(obj) { 
     if (!document.layers) { 
     var txt = document.getElementById("blankWaiver"); 
     if (obj.value == "blank") { 
     txt.style.display = "inline"; 
     // gives the text field the name of the drop-down, for easy processing 
     txt.name = "selWaiver"; 
     obj.name = ""; 
     } else { 
     txt.style.display = "none"; 
     txt.name = ""; 
     obj.name = "selWaiver"; 
     } 
     } 
    } 
    </script> 
    
    <form name="frm1" method="POST" action=""> 
    
    <select name="selWaiver" id="waivers" onchange="checkForBlank(this)"> 
     <option value="Reason">Reason</option> 
     <option value="New Reason">New Reason</option> 
     <option value="blank">Blank</option> 
    </select> 
    <p>
    <input type="text" id="blankWaiver" style="display:none;"> 
    </p>
    </form> 
    
    </body>
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,700
    Thanks
    80
    Thanked 4,658 Times in 4,620 Posts
    What radio button? And normally radio buttons occur in groups of two or more. For a single field, a checkbox is usually better. (You can't un-check a radio button.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    What radio button? And normally radio buttons occur in groups of two or more. For a single field, a checkbox is usually better. (You can't un-check a radio button.)
    I am very new, actually I've never written javascript before, but I'm working with a group of students and they assigned me a section that uses a radio button that displays a dropdown list when the blank option is selected a text box is suppose to display. I'm just trying to figure out how to write the code to do this. I also did notice that checking a radio button cannot be unchecked but that is what the group wanted. Here is the code I have for the dropdown list to display when I click the radio button but I'm having problems figuring out how to display a textbox when the blank option is selected.
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>test</title>
    <style type="text/css" media="screen">
    .hide{
    display:none;
    }
    </style>
    </head>
    <body>
    <form name="frm1" method="POST" action="">
    <p>Select type of exception:<br />
    <div id="tabs">
    <div id="nav">
    Waiver:<input type="radio" name="tab" value="pickfrom" class="div1" />
    
    </div>
    
    <div id="div1" class="tab"><br />
    <label>Reason for Waiver</label>
    <select name="selWaiver" id="waivers" onchange=checkForBlank(this)">
    <option value="reason">Reason</option>
    <option value="newReason">New Reason</option>
    <option value="blank">Blank</option>
    </select>
    
    </div>
    
    </div>
    <script type="text/javascript" charset="utf-8">
    (function(){
    var tabs =document.getElementById('tabs');
    var nav = tabs.getElementsByTagName('input');
    /*
    * Hide all tabs
    */
    function hideTabs(){
    var tab = tabs.getElementsByTagName('div');
    for(var i=0;i<=nav.length;i++){
    if(tab[i].className == 'tab'){
    tab[i].className = tab[i].className + ' hide';
    } }
    }
    /*
    * Show the clicked tab
    */
    function showTab(tab){
    document.getElementById(tab).className = 'tab'
    }
    hideTabs(); /* hide tabs on load */
    /*
    * Add click events
    */
    for(var i=0;i<nav.length;i++){
    nav[i].onclick = function(){
    hideTabs();
    showTab(this.className);
    }
    }
    })();
    </script>
    </form>
    </body>
    </html>

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,700
    Thanks
    80
    Thanked 4,658 Times in 4,620 Posts
    This just seems SO wrong:
    Code:
    <p>Select type of exception:<br />
    <div id="tabs">
    <div id="nav">
    Waiver:<input type="radio" name="tab" value="pickfrom" class="div1" />
    How can a person select a "type of exception" if they are then give only one choice? "Waiver"????

    Aren't there any other choices?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    This just seems SO wrong:
    Code:
    <p>Select type of exception:<br />
    <div id="tabs">
    <div id="nav">
    Waiver:<input type="radio" name="tab" value="pickfrom" class="div1" />
    How can a person select a "type of exception" if they are then give only one choice? "Waiver"????

    Aren't there any other choices?
    No, according to the instructions given to me that was my only option. I'm frustrated, since I've read that radio buttons are grouped with each button having a different function/option. I'm only to create one radio button that displays the drop down for the waiver and a text box that displays when blank is clicked. just not sure how to get the textbox to display when I click blank option(for the one bit of code) or create radio button to display the dropdown (for the other bit of code)

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,700
    Thanks
    80
    Thanked 4,658 Times in 4,620 Posts
    Okay...it seems nutso to me, but...

    Code:
    <form ...>
    ...
    Waiver:<input type="radio" id="tab1" name="tab" value="pickfrom" class="div1" />
    <div id="div1" class="tab"><br />
        <label>Reason for Waiver</label>
        <select name="selWaiver" id="waivers">
            <option value="reason">Reason</option>
            <option value="newReason">New Reason</option>
            <option value="blank">Blank</option>
        </select>
        <input type="text" id="blankWaiver" style="display:none;"> 
    ...
    <script type="text/javascript">
    ( function() 
      {
          document.getElementById("tab1").onclick = 
              function() {
                 document.getElementById("div1").style.display = this.checked ? "block" : "none";
              }; // end of onclick function
          document.getElementById("waivers").onchange = 
              function() {
                 var txt = document.getElementById("blankWaiver");
                 if ( this.value == "blank" )
                 {
                     txt.name = "selWaiver";
                     this.name = "";
                     txt.style.display = "inline";
                 } else {
                     txt.name = "";
                     this.name = "selWaiver";
                     txt.style.display = "none";
                 }
             }; // end of onchange function
      }
    )();
    </script>
    But it's still dumb as a doornail.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Old Pedant, I'm still trying to figure out how to hide the dropdown list until the radio button is clicked. : )

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,700
    Thanks
    80
    Thanked 4,658 Times in 4,620 Posts
    Trivial.

    I just forgot to do that.
    Code:
    Waiver:<input type="radio" id="tab1" name="tab" value="pickfrom" class="div1" />
    <div id="div1" class="tab" style="display: none;"><br />
        <label>Reason for Waiver</label>
        <select name="selWaiver" id="waivers">
            <option value="reason">Reason</option>
            <option value="newReason">New Reason</option>
            <option value="blank">Blank</option>
        </select>
        <input type="text" id="blankWaiver" style="display:none;"> 
    </div>
    
    Omissions from before shown in red.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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