Two Forms For The Price Of One

Ryan Sonnek bio photo By Ryan Sonnek

For the most part, I’m a Javascript hack, but I keep getting pulled into doing more of it. Here’s a little trick I learned recently.

It’s pretty common for websites to offer a _simple view_and an _advanced view_for data entry. Heck, even Google has an advanced search page.

The addition of an advanced view usually would entail more server side programming to handle the different data entry, but what if that wasn’t necessary? What if you only needed to build the server side handling of the advanced view_and used CSS and Javascript to display the _simple view?

Just by wrapping your advanced components in a div tag, CSS can be used to hide them. A little Javascript is all you need to change the CSS style so that the advanced view shows up. Here’s an example:

<html>
 <head>
  <style type="text/css">
    .basicView .advanced {
      display: none;
    }
  </style>

  <script type="text/javascript">
    function displayAdvancedView() {
      //change from basicView to advancedView
      //this causes the CSS to no longer hide the advanced components
      document.getElementById("form").className="advancedView";
    }
  </script>
 </head>
 <body>
  <div id="form" class="basicView">
   Keywords: <input type="text" name="keywords" />
   <a href="#" onclick="displayAdvancedView();">Advanced View</a>

   <div class="advanced">
    Start Date: <input type="text" name="startDate" />
   </div>
  </div>
 </body>
</html>

This example would also require the server side to handle default values for the advanced view since those fields will be posted, even if they are hidden.

This little trick can save quite a bit of development time when applications require a simple and advanced view for data entry. It’s not perfect, but it’s quick and easy to implement. I think it would be really cool to use scriptaculous effects to smoothly display the advanced components instead of just magically showing up.