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 Coder
    Join Date
    Jun 2004
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    radio button content switching

    I found this script to change an image based on the radio button selected:

    <FORM action="" method=post>
    <TABLE cellSpacing=0 cellPadding=0 width=429 border=0>
    <TBODY>
    <TR>
    <TD><INPUT onclick="document.images['rx-78-2'].src=(this.value)" type=radio CHECKED value=a.jpg name=rx-78-2> </TD>
    <TD><INPUT onclick="document.images['rx-78-2'].src=(this.value)" type=radio value=b.jpg name=rx-78-2> </TD></TR>
    <TR vAlign=top>
    <TD>
    1</TD>
    <TD>
    2</TD></TR></TBODY></TABLE></FORM></DIV>
    <DIV align=center>
    <TABLE cellSpacing=0 cellPadding=0 width=429 border=0>
    <TBODY>
    <TR>
    <TD>
    <DIV align=center><IMG height=400 alt="" src="us-add.php" width=400 border=0 name=rx-78-2></DIV></TD></TR></TBODY></TABLE>

    How do I use radio buttons to display different sets of form fields within a larger form on a page? Instead of switching images, I want to switch HTML code.

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tachyon
    How do I use radio buttons to display different sets of form fields within a larger form on a page? Instead of switching images, I want to switch HTML code.
    Here is an example I had laying around:

    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;
        }  else{ return true };
      }
     //-->
    </script>
    </head>
    
    <body onload="document.getElementById('subMenu').style.display='none'">
    Choose One:
    <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>


  •  

    Posting Permissions

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