jQuery 创建多步表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2074707/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating multi step forms
提问by Coughlin
I have been searching around for a way to create a multi step form such as: http://planner.builtbybuffalo.com/step-1/
我一直在寻找一种创建多步表单的方法，例如：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.
我找不到任何资源，只有其他示例，我尝试创建的将是一个由 3 部分组成的过程。我将在 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?
想法？
回答by orandov
"Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)"
“使用 jQuery（FormToWizard 插件）将任何网络表单变成强大的向导”
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.
我最近使用了这个插件，效果很好。它易于使用且易于修改以满足我的特定需求。
回答by Sandro
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.
看起来时间线上的步骤是均匀分布的。可能很简单，只需将步数乘以宽度，再除以步数即可得到标记必须行进的距离。然后使用 jQuery.animate 为标记的位置设置动画。
Sandro
桑德罗
回答by Jo?o Pimentel Ferreira
Here you have a full working simple three steps example, with no need to jQuery.
这里有一个完整的简单三步示例，不需要 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.
你只需要定义submit_form()函数。HTML 字符«和»分别打印 « 和 » 这对上一个和下一个按钮字符可能很有趣。
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)">»</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)">«</button>
<button type="button" onclick="shows_form_part(3)">»</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)">«</button>
<button type="button" onclick="submit_form()">Sum</button>
</div>
</form>
</body>