Jump to content

Help showing form based on radio button selection

apostyll

By apostyll
in Javascript Help

 Share

Recommended Posts

apostyll Newbie

apostyll

Posted
Posted

I am new to Javascript and am having problems.  I have a simple page that will display a form based off of a radio button the user selects. 

 

The error console in Firefox is indicating the document.getElementById is null regardless of what is selected. 

 

Please let me know if I am using the wrong approach or missing something.

 

Here is my code:

<script type="text/javascript">

window.onload = displaySelect;

function displaySelect(objID)
{
   switch(objID)
   {
      case 'emp':      
         document.getElementById('userType2').style.display = 'none';
         document.getElementById('userType3').style.display = 'none';
         document.getElementById('userType4').style.display = 'none';   
         document.getElementById('userType1').style.display = 'block';         
      break;
      case 'sel':
         document.getElementById('userType1').style.display = 'none';
         document.getElementById('userType3').style.display = 'none';
         document.getElementById('userType4').style.display = 'none';   
         document.getElementById('userType2').style.display = 'block';
      break;   
      case 'lok':
         document.getElementById('userType1').style.display = 'none';
         document.getElementById('userType2').style.display = 'none';
         document.getElementById('userType4').style.display = 'none';   
         document.getElementById('userType3').style.display = 'block';
      break;
      case 'stu':
         document.getElementById('userType1').style.display = 'none';
         document.getElementById('userType2').style.display = 'none';
         document.getElementById('userType3').style.display = 'none';   
         document.getElementById('userType4').style.display = 'block';
      break;      
      
      default:
         document.getElementById('userType1').style.display = 'none';   
         document.getElementById('userType2').style.display = 'none';
         document.getElementById('userType3').style.display = 'none';   
         document.getElementById('userType4').style.display = 'none';      
         document.getElementById('emp').checked = true;   
         document.getElementById('sel').checked = false;
         document.getElementById('lok').checked = false;
         document.getElementById('stu').checked = false;
   }
}
</script>
</head>
<body>

<div id="header">
   <h1> <img src="includes/images/logoblue.gif" width="169" height="49" /> </h1>
    <form id="login">
    <label class="style8">Welcome John Doe, Sign Out</label>
    </form>
</div>
<div class="colmask fullpage">
   <div class="col1">
       <div class="topDesc">
          <div align="center">
            <p class="style1">Do you currently work? Are you a student? Are you looking for a job?</p>
            <p class="style2">Tell a little about yourself</p>
          </div>
          <div class="box">
            <div align="center" class="style4">
              <p> </p>
              <p> </p>
            </div>
            <ol class="style6">
                <li><label>I am: </label><input type="radio" name="type" id="emp" value="Employed" onclick="displaySelect(this.id);" /> Employed
                                         <input type="radio" name="type" id="lok" value="Looking" onclick="displaySelect(this.id);"/> Looking
                                         <input type="radio" name="type" id="sel" value="Self-Employed" onclick="displaySelect(this.id);"/> Self-Employed
                                         <input type="radio" name="type" id="stu" value="Student" onclick="displaySelect(this.id);"/> Student
                </li>
            </ol>
<!-- Employed form -->            
            <div class="userType1" style="display: none;">
            <form>
              <table width="602" border="0" align="center" cellpadding="8">
                
                <tr>
                  <td><div align="right" class="style7">Company Name:</div></td>
                  <td><input name="compNme" type="text" id="compNme" size="40" /></td>
                  <td><span class="style3">Please enter a company name.</span></td>
                </tr>
                <tr>
                  <td><div align="right"><span class="style7">Job Title:</span></div></td>
                  <td><input name="jobtitle" type="text" id="jobtitle" size="40" /></td>
                  <td><span class="style3">Please enter a job title.</span></td>
                </tr>
                <tr>
                  <td><div align="right" class="style7">Year Started:</div></td>
                  <td><input type="text" name="startDate" id="startDate" /></td>
                  <td><span class="style3">Please enter a start date.</span></td>
                </tr>
              </table>
          
              <p> </p>
              <p align="center"><input type="submit" name="submitSearch" id="submitSearch" value="Next" class="btn-topSubmit"/></p>
            </form>
            </div>
          </div>
       </div>
        
<!-- Self-Employed Form -->            
            <div class="userType2" style="display: none;">
            <form>
              <table width="602" border="0" align="center" cellpadding="8">
                <tr>
                  <td width="125"><div align="right" class="style6">I am:</div></td>
                  <td width="240"><input name="compNme" type="text" id="compNme" size="40" /></td>
                  <td width="181"><span class="style3">Please enter a company name.</span></td>
                </tr>
                <tr>
                  <td><div align="right" class="style7">Title:</div></td>
                  <td><input name="compNme" type="text" id="compNme" size="40" /></td>
                  <td><span class="style3">Please enter a title.</span></td>
                </tr>
                <tr>
                  <td><div align="right"><span class="style7">Industry:</span></div></td>
                  <td><input name="jobtitle" type="text" id="jobtitle" size="40" /></td>
                  <td><span class="style3">Please enter a industry.</span></td>
                </tr>
                <tr>
                  <td><div align="right" class="style7">Year Started:</div></td>
                  <td><input type="text" name="startDate" id="startDate" /></td>
                  <td><span class="style3">Please enter a start date.</span></td>
                </tr>
              </table>
          
              <p> </p>
              <p align="center"><input type="submit" name="submitSearch" id="submitSearch" value="Next" class="btn-topSubmit"/></p>
            </form>
            </div>
          </div>
       </div>       
        
<!-- Looking Form -->            
            <div class="userType3" style="display: none;">
            <form>
              <table width="602" border="0" align="center" cellpadding="8">
                <tr>
                  <td width="125"><div align="right" class="style6">Last Company:</div></td>
                  <td width="240"><input name="compNme" type="text" id="compNme" size="40" /></td>
                  <td width="181"><span class="style3">Please enter a company name.</span></td>
                </tr>
                <tr>
                  <td><div align="right" class="style7">Job Title:</div></td>
                  <td><input name="compNme" type="text" id="compNme" size="40" /></td>
                  <td><span class="style3">Please enter a job title.</span></td>
                </tr>
                <tr>
                  <td><div align="right"><span class="style7">Year Started:</span></div></td>
                  <td><input name="jobtitle" type="text" id="jobtitle" size="40" /></td>
                  <td><span class="style3">Please enter a year.</span></td>
                </tr>
                <tr>
                  <td><div align="right" class="style7">Year Ended:</div></td>
                  <td><input type="text" name="startDate" id="startDate" /></td>
                  <td><span class="style3">Please enter a end date.</span></td>
                </tr>
              </table>
          
              <p> </p>
              <p align="center"><input type="submit" name="submitSearch" id="submitSearch" value="Next" class="btn-topSubmit"/></p>
            </form>
            </div>
          </div>
       </div>       
        

<!-- Student form -->            
            <div class="userType4" style="display: none;">
            <form>
              <table width="602" border="0" align="center" cellpadding="8">
                <tr>
                  <td width="125"><div align="right" class="style6">School Name</div></td>
                  <td width="240"><input name="compNme" type="text" id="compNme" size="40" />
                  <td width="181"><span class="style3">Please select one.</span></td>
                </tr>
                <tr>
                  <td><div align="right" class="style7">Degree:</div></td>
                  <td><input name="compNme" type="text" id="compNme" size="40" /></td>
                  <td><span class="style3">Please enter a degree name.</span></td>
                </tr>
                <tr>
                  <td><div align="right"><span class="style7">Specialization:</span></div></td>
                  <td><input name="jobtitle" type="text" id="jobtitle" size="40" /></td>
                  <td><span class="style3">Please enter a Specialization.</span></td>
                </tr>
                <tr>
                  <td><div align="right" class="style7">Year Started:</div></td>
                  <td><input type="text" name="startDate" id="startDate" /></td>
                  <td><span class="style3">Please enter a start date.</span></td>
                </tr>
              </table>
          
              <p> </p>
              <p align="center"><input type="submit" name="submitSearch" id="submitSearch" value="Next" class="btn-topSubmit"/></p>
            </form>
            </div>
          </div>
       </div>


        
        
<!-- Column 1 start -->
      <h2> </h2>
     <!-- Column 1 end -->
   </div>
</div>
<div id="footer">
   <p align="center">Contact Us</p>

</div>

</body>
</html>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.