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

    Hopefully very easy radio button question

    Hi Everybody,

    I'm new to all of this and I'm hoping this question is very simple.

    I have 4 radio buttons:

    Selection A
    Selection A1
    Selection A2
    Selection B

    If you select A, you would then have to select A1 or A2. But, if you select B, A, A1 & A2 would be cleared of any previous selections. From my research I'm assuming A&B should be one group of radio buttons and A1 & A2 should be a sub-group of A. What's throwing me off is where to put the javascript code and how it should be written. If anybody could assist me, I'd appreciate it.

    Thanks.

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Since you only have the four radio buttons I do not see a need for any loops. Elsewise, I would have wrote it differently.

    Try this:
    Code:
    <script type="text/javascript">
     <!--//
      function chkForm(form){
       var subMenu = document.getElementById('subMenu');
        if(form.main[1].checked){
           form.subA[0].checked = false;
           form.subA[1].checked = false;
           subMenu.style.display = 'none';
        }  else{ subMenu.style.display = 'block' };
      }
    
      function validate(form){
        if(!form.main[0].checked && !form.main[1].checked){
           alert('You must choose either radio A or B');
           return false;
        }
       
        if(form.main[0].checked && !form.subA[0].checked && !form.subA[1].checked){
           alert('You must choose a Group A Submenu Button');
           return false;
        }  return true;
      }
     //-->
    </script>
    </head>
    
    <body onload="document.getElementById('subMenu').style.display='none'">
    <div><form method="get" action="" onsubmit="return validate(this)">
    A: <input type="radio" name="main" value="A" onclick="chkForm(this.form)"><br>
       <span id="subMenu" style="display:block">
       &nbsp;&nbsp;A1: <input type="radio" name="subA" value="A1"><br>
       &nbsp;&nbsp;A2: <input type="radio" name="subA" value="A2"><br>
       </span>
    B: <input type="radio" name="main" value="B" onclick="chkForm(this.form)"><br>
    <input type="submit" value="Submit">
    </form></div>
    Last edited by Willy Duitt; 05-27-2004 at 09:08 PM.


  •  

    Posting Permissions

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