Create next and back buttons and add interatcion

Creating the buttons isn’t that hard. Each button will have a unique name (e.g. step1next, or step3prev) and will be appended to their panels created in previous step. In order to add some interaction, and that is to enable moving between steps, we need to bind click event to each button. This is how they will work:

• When user presses back button it will hide the current step, show the previous one and call selectStep() method which will mark it as current.
• When user presses next button it will hide the current step, show the next one and call selectStep() method which will mark it as current.

function createPrevButton(i) {

var stepName = "step" + i;

$("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Prev' class='prev'>< Back</a>");

$("#" + stepName + "Prev").bind("click", function(e) { $("#" + stepName).hide(); $("#step" + (i - 1)).show(); selectStep(i - 1); });}

function createNextButton(i) { var stepName = "step" + i; $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Next ></a>"); $("#" + stepName + "Next").bind("click", function(e) { $("#" + stepName).hide(); $("#step" + (i + 1)).show(); selectStep(i + 1); });}

Function selectStep() that I mentioned before removes CSS class “current” from all steps and assign it only to the currently selected.

function selectStep(i) { $("#steps li").removeClass("current"); $("#stepDesc" + i).addClass("current");}

At this moment wizard is functional. But that’s not all. Let’s apply Steps left UI design pattern here.

Create “steps left” information

This is easier than it might look like at the first sight. At the very beginning of our code we have to add unordered list that will be a container for steps left information. In addition to this we will hide signup button. We want it to be visible only in the last step.

var steps = $("#SignupForm fieldset");var count = steps.size(); $("#SaveAccount").hide();$("#SignupForm").before("<ul id='steps'></ul>");

We also need to extend each() function and add information about steps for each fieldset in wrapped set. Each step will have it’s natural number, starting with 1. Below the step number we’ll add a description that is extracted from <legend> element.

steps.each(function(i) { var name = $(this).find("legend").html(); $("#steps").append("<li id='stepDesc" + i + "'>Step " + (i + 1) + "<span>" + name + "</span></li>");...});

Let’s do just one more thing. Since submit button should be visible only in the last step, we’ll hide it every time user presses next. Only if user comes to the last step, it should be visible.

$("#" + stepName + "Prev").bind("click", function(e) { $("#SaveAccount").hide();});$("#" + stepName + "Next").bind("click", function(e) { if (i + 2 == count) $("#SaveAccount").show();});

If you want to see the full source code, download it or check out the demo.

Plugin for easier use

It would be a pity not to create a plugin that will enable all of this in just one line of code. I called it FormToWizard. I guess it’s clear what it does:) In order to apply the plugin you will have to add a reference to script file and apply it to y <form> element.

<script type="text/javascript" src="formToWizard.js"></script>

$("#SignupForm").formToWizard();

If you want to hide a submit button (or placeholder for multiple buttons) you can add a parameter sumbitButton with the name of element you wish to be hidden.

$("#SignupForm").formToWizard({ submitButton: 'SaveAccount' })