Turn a form into a step-by-step process

jquery.form-wizard.js

;(function ($, window, document, undefined) {
    "use strict";

    var pluginName = "formWizard",
        defaults = {
            sections: 'fieldset',
            navNext: '#form-next',
            navPrev: '#form-previous',
            progressBar: '.progress-bar',
            beforeChange: function(instance){
                return true;
            },
            afterChange: function(instance){
                return true;
            }
        };

    function FormWizard (element, options) {
        this.$element  = $(element);
        this.settings  = $.extend({}, defaults, options );
        this._defaults = defaults;
        this._name     = pluginName;
        this.init();
    }

    $.extend(FormWizard.prototype, {

        init: function () {
            var _this = this;
            this.$window = $(window);
            this.$steps = this.$element.find(this.settings.sections);
            this.$container = $('<div/>').addClass('wizard').prependTo(this.$element).append(this.$steps);
            this.$progressBar = $(this.settings.progressBar);
            this.currentStep = 0;
            this.$window.on('resize', function(){
                _this.containerSize();
            }).trigger('resize');

            this.$steps.each(function(i){
                $(this).data('step', i).hide();
            });

            this.initNavigation();
            this.changeStep(this.currentStep);
            this.log(this);
        },

        containerSize: function(){
            var maxHeight = 0;
            this.$steps.each(function(i){
                maxHeight = Math.max(maxHeight, parseInt($(this).css('height'), 10));
            });
            this.$container.css('height', maxHeight);
        },

        changeStep: function(i) {

            if ($.isFunction(this.settings.beforeChange)) {
                if (!this.settings.beforeChange({ currentStep: this.currentStep, nextStep: i })) {
                    return false;
                }
            }

            this.currentStep = i;
            this.$steps.hide();
            this.$steps.eq(this.currentStep).fadeIn();
            this.updateNavigation();
            this.updateProgressBar();

            if ($.isFunction(this.settings.afterChange)) {
                if (!this.settings.afterChange({ currentStep: this.currentStep, nextStep: i })) {
                    return false;
                }
            }
        },

        updateNavigation: function(){
            if (this.currentStep==0) {
                this.$navPrev.attr('disabled', 'disabled');
                this.$navNext.data('step', this.currentStep + 1);
            } else if (this.currentStep == this.$steps.length - 1) {
                this.$navPrev.data('step', this.currentStep - 1);
                this.$navNext.attr('disabled', 'disabled');
            } else {
                this.$navPrev.removeAttr('disabled');
                this.$navNext.removeAttr('disabled');
                this.$navPrev.data('step', this.currentStep - 1);
                this.$navNext.data('step', this.currentStep + 1);
            }
        },

        initNavigation: function() {
            var _this = this;
            this.$navPrev = $(this.settings.navPrev)
                .on('click', function(evt){
                    evt.preventDefault();
                    _this.changeStep($(this).data('step'));
                });
            this.$navNext = $(this.settings.navNext)
                .on('click', function(evt){
                    evt.preventDefault();
                    _this.changeStep($(this).data('step'));
                });
        },

        updateProgressBar: function() {
            var percent = (100 / (this.$steps.length - 1)) * this.currentStep;
            this.$progressBar
                .css('width', percent + '%')
                .html((this.currentStep + 1) + ' of ' + (this.$steps.length));
        },

        log: function(x){
            if (window.console) {
                console.log(x);
            }
        }

    });

    $.fn[pluginName] = function(options) {
        return this.each(function() {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new FormWizard(this, options));
            }
        });
    };

})(jQuery, window, document);