Multiple radio buttons, show/hide two possible div tables

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • BearCat97
    New Member
    • Jul 2008
    • 4

    #1

    Multiple radio buttons, show/hide two possible div tables

    I have a ASP for with Javascript.
    There are 4 yes/no questions that are asked and depending on the combinations of the four, it then displays one of two options below the table.
    I have the code below just for that section.
    Any assistance would be greatly appreciated.
    Thanks!


    Code:
    <html>
    <head>
    <title>Request Form</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    
    <body bgcolor="#FFFFFF">
    <form action="Form_Conformation.asp" method="post" name="form1">
      <table width="100%" border="0" cellpadding="4" cellspacing="0">
        <tr>
          <td colspan="2"><b>GENERAL INFORMATION</b></td>
        </tr>
        <tr> 
          <td width="335">Does the coursework maintain or improve skills needed for your current job?</td>
          <td><input name="skills" id="skills" type="radio" value="1">Yes<input name="skills" id="skills" type="radio" value="0">No</td>
        </tr>
        <tr> 
          <td width="335">Is the coursework required by your manager and the company in order to retain your current job?</td>
          <td><input name="coursework" id="coursework" type="radio" value="1">Yes<input name="coursework" id="coursework" type="radio" value="0">No</td>
    	</tr>
        <tr> 
          <td width="335">Does the coursework qualify you for a new trade or business?</td>
          <td><input name="newTrade" id="newTrade" type="radio" value="1">Yes<input name="newTrade" id="newTrade" type="radio" value="0">No</td>
        </tr>
        <tr> 
          <td width="335">Is the coursework needed in order for you to meet minimum requirements of your job?</td>
          <td><input name="min_require" id="min_require" type="radio" value="1">Yes<input name="min_require" id="min_require" type="radio" value="0">No</td>
        </tr>
      </table>
      
    <div id="optionOne" style="display:none">
      <table border="0" cellpadding="4" cellspacing="0">  
        <tr>
          <td colspan="2"><b>NOTE:</b></span> Your request has been identified as <b><i>job related education</i></b>.</td>
        </tr>
      </table>
    </div>
    
    <div id="optionTwo" style="display:none">
        <table border="0" cellpadding="4" cellspacing="0">
          <tr>
            <td colspan="2"><b>NOTE:</b></span> Your request has been identified as <b><i>tuition reimbursement</i></b>.</td>
          </tr>
        </table>
    </div>
    
    <input type="submit" name="Button" value="Submit">
    
    </form>
    </body>
    </html>
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    Use the checked property to determine which radio button is selected. To get a radio button object, you can use document.getEle mentsByName and then loop over the selection until you find the radio button that has been selected.

    To show the div, access it by its ID (document.getEl ementById) and then set its style.display property to "block".

    Comment

    • BearCat97
      New Member
      • Jul 2008
      • 4

      #3
      Sorry, I am pretty new to ASP and Javascript. I am sort-of fumbling my way through it. Can you assit with the code? I am still learning.

      Also, any good books or web sites that i can read to get more knowledge on classic ASP or Javascript?

      Thanks!

      Comment

      • acoder
        Recognized Expert MVP
        • Nov 2006
        • 16032

        #4
        Here's one way to get the value of the selected radio button (this being within a function):
        Code:
        for (var i=0; i < form.radio.length; i++) {
            if (form.radio[i].checked) {
                return form.radio[i].value;
            }
        }
        where 'form' is the form and 'radio' is the name of the radio button group. There are also other ways this can be achieved, some more efficient than others.

        For some tutorials, see the Offsite Links sticky thread at the top of the forum.

        Comment

        • BearCat97
          New Member
          • Jul 2008
          • 4

          #5
          Thanks!

          I did get this form working the way I wanted a few weeks ago. The script I had to write was a lot longer then what i was planning becasue the rules were changed on me.

          Thanks for all the help.

          Comment

          Working...