Hello and welcome to our community! Is this your first visit?
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
    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.


  2. #2
    Join Date
    Sep 2003
    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:
    <script type="text/javascript">
      function chkForm(form){
       var subMenu = document.getElementById('subMenu');
           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;
    <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>
    B: <input type="radio" name="main" value="B" onclick="chkForm(this.form)"><br>
    <input type="submit" value="Submit">
    Last edited by Willy Duitt; 05-27-2004 at 10: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