RSS

Show/hide elements depending on form selection

15 May

Say you have several fields on a form. Some of these fields need to be hidden/shown depending on the state of other element, for instance, checkbox.

Suppose we have the following simple markup:

<form id="theform">

   <p><input type="checkbox">Jeans</p>
   <p>Jeans Size: <select><option>1</option><option>2</option></select></p>
   <p>Jeans Colour: <select><option>Blue</option><option>Green</option></select></p>

   <p><input type="checkbox">Skirt</p>
   <p>
      Skirt Size: <select><option>1</option><option>2</option></select>
      Skirt Colour: <select><option>Blue</option><option>Green</option></select>
      Skirt Type: <select><option>Mini</option><option>Maxi</option></select>
   </p>

</form>

As there are no multiple dependances between elements and only one element is responsible for either show or hide additional block, then we give an ID to main group elements like “jeans”,”skirts”, etc. and CLASS of the same value to additional block elements:

<form id="theform">

   <p class="main"><input type="checkbox" id="jeans" >Jeans</p>
   <p class="jeans">Jeans Size: <select><option>1</option><option>2</option></select></p>
   <p class="jeans">Jeans Colour: <select><option>Blue</option><option>Green</option></select></p>

   <p class="main"><input type="checkbox" id="skirt">Skirt</p>
   <p class="skirt">
      Skirt Size: <select><option>1</option><option>2</option></select>
      Skirt Colour: <select><option>Blue</option><option>Green</option></select>
      Skirt Type: <select><option>Mini</option><option>Maxi</option></select>
   </p>

</form>

Then in window.onload event holder I create an object of the following structure that holds links to P elements which we want to hide/show.

obj['jeans'][0] = p1;
obj['jeans'][1] = p2;
obj['skirt'][0] = p3;

As we store the references then position of the element in the document doesn’t matter for us.

window.onload = function(){

   elemObj = new Object();
   var formP = document.getElementById("theform").getElementsByTagName("p");

   for(var i=0; i&lt;formP.length; i++){

      if(formP[i].className!="main") {
         if(typeof elemObj[formP[i].className]=='undefined') 
            elemObj[formP[i].className] = new Array(); 
         elemObj[formP[i].className].push(formP[i]);
         formP[i].style.display = 'none'; 
      } else formP[i].getElementsByTagName("input")[0].onclick = hideshow;
   }

}

At the same time I hide additional blocks (formP[i].style.display = ‘none’;) so if Javascript is disabled all inputs stay visible.

It’s a very simple solution for very simple markup structure. In situations where more than one element is responsible for additional block behaviour this method doesn’t work and you need to look for a more complex solution.

Advertisements
 
3 Comments

Posted by on May 15, 2009 in CSS, HTML, JavaScript

 

Tags:

3 responses to “Show/hide elements depending on form selection

  1. aleahhill

    May 25, 2009 at 12:25 am

    Oooh, can’t wait to try this out when I get back to work on Monday. Thanks for posting.

     
  2. Marc

    July 4, 2009 at 4:31 am

    Hello. Can you provide more code to this? When I try to use it i get ‘hideshow not defined’ and also how exactly do you create that object? Or perhaps you use any framework? thanks for info.

     
    • Dasha

      July 6, 2009 at 9:25 am

      Hello Mark,

      Please thy it with the following hideshow function:

      var hideshow = function(){
      var elems = elemObj[this.id];
      for(var i=0; i

       

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: