Multi-step form navigation jQuery plugin

I was recently creating a system with a multi-step form. The form itself wasn't particularly complicated, it just had a number of steps which the user needed to complete. It didn't make sense for each stage of the form to be a seperate form which is posted to a server, and then fully processed at the end. Instead, it seemed more appropriate to hide each section of the form, except for the current section being completed, using jQuery.

A back / forward button allowing the user to navigate through the form, a list of sections to allow the user to jump to a specific section, and a preview button at the end to show the entire form so the user could review it all at a glance if they wanted to.

This is an approach I've needed to use a number of times in the past and this time I've decided to write it into a jQuery plugin. All you need to do is call the plugin, and it does all the work.

The plugin

The plugin itself is fairly straight forward. When called against a particular div, it automatically hides all children, except for the first child (the first section of the form). It then inserts Next and Previous buttons at the top of the section, and sets them up to navigate through the form. For each section of the form, the h2 element is extracted and used to build a list of form sections. This allows the user to jump to a specific section, as well as just going forward and back. Finally, it intercepts the preview link to show all form sections and hide the next/previous buttons and the preview button. The plugin is developed so that it can work with multiple form on a single page if you so wish, and can be customised by passing configuration options.

 
/**
 * jQuery Multi-Step Section Plugin v1.0
 * @author Michael Peacock
 * @url www.michaelpeacock.co.uk
 */
(function($) {
	$.fn.sectionnavigator = function( settings ) {
		
		var config = {'nextclass' : 'next', 'prevclass' : 'prev', 'master_nav_heading' : 'h2' };
		var masterReference = $(this).attr('id');
		if (settings) $.extend(config, settings);
				
		$(this).children().each( function(index){ 
			$(this).attr('id','sn_section_' + masterReference + '_' + index ); 
			$(this).prepend('<div class="' + masterReference + '_navigation" style="min-height: 26px;"><input class="prev" type="button" value="Previous" /> <input class="next" style="float: right;" type="button" value="Next" /></div>');
			$('#' + masterReference + '_navigator').append('<li><a class="mnav_link" rel="sn_section_' + masterReference + '_' + index + '" href="#">' + $( config.master_nav_heading ,this).text() + '</a></li>');
		});
		
		$('.mnav_link').live( 'click', function(){ 	
			$('#' + masterReference ).children().hide();
			$( '#' + $(this).attr('rel') ).show();
			return false;	
		});
		
		$('#' + masterReference + '_preview').live( 'click', function(){
			$('#' + masterReference).children().show();	
			$('.' + masterReference + '_navigation').hide();
			$('#' + masterReference + '_navigator').hide();
			$(this).hide();
			return false;
			
		});
		
        $(this).children().hide();
        $(this).children().first().show();
        $( ' .section:first .' + config.prevclass, this ).hide();
		$( ' .section:last .' + config.nextclass , this ).hide();
        
		$('.' + config.nextclass ).live( 'click', function(){
			$(this).parent().parent().hide().next().show();
			return false;
		} );
		$('.' + config.prevclass ).live( 'click', function(){
			$(this).parent().parent().hide().prev().show();
			return false;
		} );
				  
		return this;
		
	};
})(jQuery);

Usage

To use ths plugin, you simply call sectionnavigator() against the div containing the form.

 
<script type="text/javascript">
    $(document).ready(function(){
	    $('#master').sectionnavigator();
    });
</script>

The form that it applies to, simply needs a div for each section, a heading for each section, and a containing div. The master_navigator section is then used to populate a list of sections which the user can jump to.

 
<ul id="master_navigator" style="float:right; width: 150px;"></ul>
<div id="master">
	<div class="section">
		<h2>Stage 1</h2>
		<label>Something</label>
		<input type="text" />
	</div>
	<div class="section">
		<h2>Stage 2</h2>
		<label>Something</label>
		<input type="text" />
	</div>
	<div class="section">
		<h2>Stage 3</h2>
		<label>Something</label>
		<input type="text" />
		<input type="button" id="master_preview" value="Preview" />
	</div>
</div>

Example

You can view an example here, and you can download the plugin here.

Posted by Michael on 7th Aug 2011 at 06:06

Comments

This is very similar to that one ... http://www.jankoatwarpspeed.com/examples/webform_to_wizard/# and I tried both with attempting to integrate the livevalidation http://livevalidation.com/ but to no avail... Thanks

Posted by Marc on 13th September 2011 at 09:09

good stuff!!! thanks for posting

Posted by feathersdesigns on 6th October 2011 at 07:07

Post a comment