Author Topic: Hide nonrequired additional form fields  (Read 12792 times)

0 Members and 1 Guest are viewing this topic.

Offline Jason

  • Administrator
  • Hero Member
  • *****
  • Posts: 1018
    • slipdex
Hide nonrequired additional form fields
« on: July 01, 2007, 01:31:43 PM »
Sometimes you have a reason to allow users to input additional info but it is not mandatory and you would like to allow the user to display it themselves if they wish.  You can do this easily by using a javascript toggle:

Stick this script in the <head> of your page:

<script language="javascript">
  function toggle(itemID){
      // Toggle visibility between none and inline
      if ((document.getElementById(itemID).style.display == 'none'))
      {
        document.getElementById(itemID).style.display = 'inline';
      } else {
        document.getElementById(itemID).style.display = 'none';
      }
  }
</script>

Then any additional info you wish to allow to toggle just give it an id=something.  Then use a blank <a href> call to display it.  Here is a simple form example:
<form>
   <table border="0" width="100%">
      <tr>
         <td>Name</td>
         <td><input type="text" size="20" name="name"></td>
      </tr>
      <tr>
         <td>Age</td>
         <td><input type="text" size="5" name="age"></td>
      </tr>
   </table>
<a href="#" onclick="toggle('moreinfo')">Add Info</a>
<table border="0" width="100%" id="moreinfo" style="display:none;">
      <tr>
         <td>Spouse Name</td>
         <td><input type="text" size="20" name="spousename"></td>
      </tr>
      <tr>
         <td>Spouse Age</td>
         <td><input type="text" size="5" name="spouseage"></td>
      </tr>
   </table>
</form>

Go ahead and copy and paste that exact code and play with it.  This is handy for keeping your forms nice and clean!

Jason
Founder of www.slipdex.com