Close

We have just released "Mentor" - a fully responsive HTML5 business template on themeforest.net > Live Demo

Open Announcement

Pixelentity

Hide Form Fields with CSS and jQuery

Download via jsfiddle

Complex forms with lots of fields can be a real pain for users. Here we will outline a simple way to deal with this situation using CSS and jQuery.

If some of the options only have real meaning when a particular condition is met (like, for example, they depend on another form option’s value), things can be simplified by hiding unnecessary fields at runtime.

This is nothing new and is traditionally handled using jQuery to hide/show the form fields, however the drawback of this is that you’re generally forced to alter javascript code when adding or removing the options.

Here we will explore an alternative solution which uses CSS rules to handle the hide/show work and only requires a minimal amount of code.

Let’s say the form fields can be grouped so that at runtime you can chose to only display one group while hiding all others. For maximum flexibility, it is required that each option can be part of one or more groups, while options not assigned to any group will always be shown.

The HTML

<form>
	<div id="main">
		<div class="group1_opts">
			<label>G1 option </label><input type="text" name="opt1">
		</div>
		<div class="group1_opts group2_opts">
			<label>G1/G2 option</label><input type="text" name="opt2">
		</div>
		<div class="group2_opts group3_opts">
			<label>G2/G3 option</label><input type="text" name="opt3">
		</div>
		<div class="group3_opts">
			<label>G3 option</label><input type="text" name="opt4">
		</div>
	</div>
</form>

So here we have 4 options (opt1 to opt4) and 3 groups:
Option 1 belongs to group 1
Option 2 belongs to group 1 and 2
Option 3 belongs to group 2 and 3
Option 4 belongs to group 3

If we set the active group as a class applied to #main (div container) as follows,

<div id="main" class="group1" >

then group visibility can be controlled using only a few simple CSS rules.

The CSS

.group1_opts, .group2_opts, .group3_opts {
    display: none;
}

.group1 .group1_opts, .group2 .group2_opts, .group3 .group3_opts{
    display: block;
}

The first rule will hide all groups, while the second, will only display the ones which match the class of the parent container. Seeing as the last rule has higher priority, it will override the “display: none” declaration which was set on the previous rule.

Now we can integrate some javascript to change the active group at runtime. Firstly we add a group chooser:

Group Chooser

<form>
	<div id="main" class="group1">
		 <div>
			<label>Choose group</label>
			<select name="group">
				<option value="group1">Group 1</option>
				<option value="group2">Group 2</option>
				<option value="group3">Group 3</option>
			</select>
		</div>
		<div class="group1_opts">
			<label>G1 option </label><input type="text" name="opt1">
		</div>
		<div class="group1_opts group2_opts">
			<label>G1/G2 option</label><input type="text" name="opt2">
		</div>
		<div class="group2_opts group3_opts">
			<label>G2/G3 option</label><input type="text" name="opt3">
		</div>
		<div class="group3_opts">
			<label>G3 option</label><input type="text" name="opt4">
		</div>
	</div>
</form>

Since “select” parent div has no group class, it will always be displayed no matter which group is currently active. To switch the active group, the jQuery code will just need to change #main div’s class, as seen below.

Active Class Switching

function changeGroup(e) {
    /*
        1 - Remove all group classes
        2 - Add the currently selected group class
    */
    $("#main")
        .removeClass(allGroups)
        .addClass($("option:selected", e.target).val())
}

/*
    1 - Bind changeGroup function to "change" event
    2 - Fetch all group from the select field
*/
var allGroups = $("select")
    .change(changeGroup)
    .find("option")
        .map(function() {
            return $(this).val();
        })
        .get()
        .join(' ');

The tricky part is to fetch all groups from the select box. Doing so means you can add/removeĀ  a group or options by simply editing the markup and css rules and no changes in the javascript code will be required.

And there you have it. Check out the demo below, or demo externally via the “Demo” button at the top of the post.

Demo

Leave a Reply