How to show/hide a hidden input form field using jQuery

February 13, 2010
Javascript & AJAX
jQuery
Tutorials

This past week I was working on a project at work which included building a request form with multiple fields. It was a rather large form that included a dropdown list with an 'other' option. I wanted to allow users to select the 'other' option which then would show an input field so they can enter a specific description of what that 'other' item is. I didn't want to clutter the form by displaying that additional field by default so I used a little jQuery, thus displaying it dynamically and only when needed.

Update: Thanks to AEXT for the inclusion of my tutorial on their Top Worthwhile Tutorials of the Week!

The XHTML markup:

<form id="myForm" method="post" action="#">
<fieldset>

<label>My name:</label>
<input type="text" name="Name" class="textfield" />

<label>My email address:</label>
<input type="text" name="EmailAddress" value=" " class="textfield" />

<label>Select 'Other' from this dropdown list:</label>
<select class="dropdown" name="Items" id="otherFieldOption">
<option>Select...</option>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>

<!-- THIS DISPLAYS THE HIDDEN FIELD -->
<option value="otherField">Other</option>
</select>

<!-- BEGIN HIDDEN INPUT -->
<div id="otherField">
<label>This is my other option:</label>
<input type="text" name="otherField" class="textfield" />
</div>
<!-- END HIDDEN INPUT -->

<input type="submit" name="Submit" value="Submit" class="btn" onclick="this.blur();" />
</fieldset>
</form>

The jQuery:

$(document).ready(function() {
  $.viewInput = {
    '0' : $([]),
	//THIS IS THE NAME OF THE DIV WRAPPING THE HIDDEN FIELD
    'otherField' : $('#otherField'),
  };

$('#otherFieldOption').change(function() {
    // HIDES THE INPUT FIELD IF ANOTHER DROPDOWN ITEM IS SELECTED ONCE THE HIDDEN FIELD IS LOADED
    $.each($.viewInput, function() { this.hide(); });
	// SHOWS THE INPUT FIELD ITEM IF SELECTED
    $.viewInput[$(this).val()].show();
  });

});

Pretty it up with some CSS:

/* SET THE HIDDEN INPUT FIELD IN A DIV */

#otherField {
  display: none;
}

/* FORM */

fieldset {
  width: 290px;
  margin: 0;
  padding: 20px;
  background: #f4f4f4;
  border: 1px solid #ddd;
}

label {
  display: block;
  font: bold 1.0em arial,verdana,tahoma,sans-serif;
  color: #444;
  margin: 0 20px 10px 0;
  padding: 0;
  clear: left;
}

.textfield, .dropdown {
  width: 200px;
  font: normal 1.0em arial,verdana,tahoma,sans-serif;
  color: #666;
  margin: 0 0 20px 0;
  padding: 5px 6px;
  background: #fff;
  border: 1px solid #ddd;
}

.dropdown {
  width: 215px;
}

input:focus, select:focus {
  border: 1px solid #ccc;
}

.btn, .btn:focus {
  display: block;
  font: bold 1.0em arial,verdana,tahoma,sans-serif;
  color: #333;
  text-decoration: none;
  margin: 0;
  padding: 3px 5px;
}

Stay well.

Post a comment

Tim
Details: This is a very nice and easy plugin, saved it to my jQuery favorites for later use! Thanks!
Posted: February 18, 2010
KURUMSAL WEB TASARIM RECEP YILDIZ
thanks you for
Posted: February 18, 2010
Greg
I've done this forms previously but without jQuery. One things that I've liked is rather than having the new field just appear is to slide it in and slide it out.

Great post.
Posted: February 19, 2010
Eyad
Will this work with dynamically built fields? I wonder because the script is rendered at the document.ready() event which i think is trigerred when the DOM is ready.

I know dynamicaly built fields are not a great idea but sometimes are necessary for web-apps.

Awesome work!
they're necessary for web-apps.
Posted: February 20, 2010
Skyrocket Labs
Hey, Eyad,

I'd be curious to see how this could be combind with some PHP form controls. I'm working on a small app that might give me an opportunity to test it. I'll keep you posted. Oh, and did you like the gray in the demo? ;)
Posted: February 20, 2010
Eyad
Yes, I really enjoyed the gray in the demo... you know I'm a BIG fan of Gray :o)
Posted: February 21, 2010
barkod sistemi
thank you for share This guy has some interesting suggestions as well: comprehensive article by Artem Smirnov, creator of Ivonna, about ASP.NET unit testing.
Posted: February 28, 2010
tehnolog
When I select Item1, I get error in IE8: '$.viewInput[...]' - null ...
Posted: March 6, 2010
Skyrocket Labs
Hmmm...I don't get that error on my end. Can you send a screenshot?
Posted: March 6, 2010
Daniel Alexander
$('#otherFieldOption').change(function(e) {
$('#otherField').css('display', ( $(this).val() != 'otherField' ? 'none' : ''));
or
var t = ($(this).val() == 'otherField' ? 'show' : 'hide' ); $('#otherField')[t]();
});

Yeah, thanks to jQuery there's plenty of ways of tackling a problem like this.
Posted: July 29, 2010
Skyrocket Labs
Thanks, Daniel! Go jQuery go!
Posted: August 2, 2010