Creating multi step forms

后端未结

关注

 3  421

独厮守ぢ

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 exampl

相关标签:

3条回答

爱一瞬间的悲伤

2020-12-04 23:22

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...
独厮守ぢ

2020-12-04 23:24

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

0 讨论(0)
发布评论:

提交评论
- 加载中...

挽巷

2020-12-04 23:37

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>

0 讨论(0)