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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Using visible/hidden radio buttons

    Hi

    I'm trying to create a questionnaire style series of radio buttons which are hidden and then a different set of radio buttons displayed depending on the previous answer. eg

    Q1 Is it a man? (if select yes then display)
    Q2 Is he called John? (if no then display)
    Q3 Is he called Gary? and so on...


    I've been testing using the code below but wondered if anyone had any ideas on how this could be done easily?

    Be grateful for any advice, Matt.

    Code:
    Is it a Man?
    <input type="radio" name="agree" value="y" onClick="toggle(this)" /> Yes
    <input type="radio" name="agree" value="n" onClick="toggle(this)" /> No
    
    <br />
    
    <p id="continue">
    <input type="radio" name="agree" value="y" onClick="toggle(this)" /> Yes
    <input type="radio" name="agree" value="n" onClick="toggle(this)" /> No
    </p>
    
    
    
    <script>
      var continue_button = document.getElementById('continue');
      continue_button.style.visibility = 'hidden';                
    
      function toggle(switchElement) {
            if (switchElement.value == 'y')
                    continue_button.style.visibility = 'visible';
            else
                    continue_button.style.visibility = 'hidden';                
      }
    </script>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,015
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Is this what you are looking for?

    Code:
    <form name = "myform">
    Is it a Man?
    <input type="radio" name="agree" value="y" onClick="toggleJ(this)" /> Yes
    <input type="radio" name="agree" value="n" onClick="toggleJ(this)" /> No
    
    <br />
    
    <p id="continue1" style="display:none">
    Is he called John?
    <input type="radio" name="John" value="y" onClick="toggleG(this)" /> Yes
    <input type="radio" name="John" value="n" onClick="toggleG(this)" /> No
    </p>
    
    <p id="continue2" style="display:none">
    Is he called Gary?
    <input type="radio" name="Gary" value="y"  /> Yes
    <input type="radio" name="Gary" value="n" /> No
    </p>
    
    </form>
    
    <script type = "text/javascript">
    
    function toggleJ(switchElement) {
    if (switchElement.value == 'y') {
    document.getElementById("continue1").style.display = "block";
    }
    else {
    document.getElementById("continue1").style.display = "none";
    document.getElementById("continue2").style.display = "none";
    }              
    }
    
    function toggleG(switchElement) {
    if (switchElement.value == 'n') {
    document.getElementById("continue2").style.display = "block";
    }
    else {
    document.getElementById("continue2").style.display = "none";
    }     
    }
    
    </script>
    You may not have two radio button groups with the same name.


    "A psychiatrist asks a lot of expensive questions that your wife asks for nothing." – Joey Adams
    Last edited by Philip M; 07-13-2010 at 09:04 PM.

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Perfect!

    Thanks for the prompt and super helpful response.

    Matt


  •  

    Posting Permissions

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