Creating multi step forms

I have been searching around for a way to create a multi step form such as: http://planner.builtbybuffalo.com/step-1/

I couldnt find any resources, just other examples, the one I am trying to create will be a 3 part process. I am going to be building this in jQuery.

I can understand the way to go from step to step, fadein/out, etc. But having a marker change and say what step.

Thoughts?

orandov

Try this blog post from Janko

"Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)"

Here is his demo .

I haven't used this plugin from him but I know that he has very good posts that I have used in the past.

I hope this helps.

EDIT:

I recently have used this plugin and it worked great. It was simple to use and easy to modify for my specific needs.

Looks like the steps on the timeline are evenly spaced. It might be as simple as multiplying the step number by the width and divide by the number of steps to get the distance the marker has to travel. Then use jQuery.animate to animate the position of the marker.

Sandro

Here you have a full working simple three steps example, with no need to jQuery.

You just need to define the submit_form() function. The HTML characters « and » just print respectively « and » which might be interesting for the previous and next button characters.

function shows_form_part(n){
    var i = 1, p = document.getElementById("form_part"+1);
    while (p !== null){
        if (i === n){
            p.style.display = "";
        }
        else{
            p.style.display = "none";
        }
        i++;
        p = document.getElementById("form_part"+i);
    }
}

function submit_form() {
	var sum = parseInt(document.getElementById("num1").value) +
            parseInt(document.getElementById("num2").value) +
            parseInt(document.getElementById("num3").value);
  alert("Your result is: " + sum);
}

<body onload="shows_form_part(1)">
<form>
  <div id="form_part1">
    Part 1<br>
    <input type="number" value="1" id="num1"><br>
    <!--form elements 1-->
    <button type="button" onclick="shows_form_part(2)">&raquo;</button>
  </div>
  <div id="form_part2">
    Part 2<br>
    <input type="number" value="2" id="num2"><br>
    <!--form elements 2-->
    <button type="button" onclick="shows_form_part(1)">&laquo;</button>
    <button type="button" onclick="shows_form_part(3)">&raquo;</button>
  </div>
  <div id="form_part3">
    Part 3<br>
    <!--form elements 3-->
    <input type="number" value="3" id="num3"><br>
    <button type="button" onclick="shows_form_part(2)">&laquo;</button>
    <button type="button" onclick="submit_form()">Sum</button>
  </div>
</form>
</body>

来源：https://stackoverflow.com/questions/2074707/creating-multi-step-forms

标签

jquery

forms

multi-step