Jump to content

Help showing form based on radio button selection

apostyll

By apostyll
in Javascript Help

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>

Archived

This topic is now archived and is closed to further replies.

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.