创建多步骤表单答案

【问题标题】：Creating multi step forms创建多步骤表单
【发布时间】：2010-01-15 20:52:48
【问题描述】：

我一直在寻找一种创建多步骤表单的方法，例如：http://planner.builtbybuffalo.com/step-1/

我找不到任何资源，只有其他示例，我尝试创建的将是一个 3 部分过程。我将在 jQuery 中构建它。

我可以理解从一步到一步的方式，淡入/淡出等。但是有一个标记会改变并说出什么步骤。

想法？

【问题讨论】：

示例网址不再有效。

标签： jquery forms multi-step

【解决方案1】：

从Janko试试这个blog post

“使用 jQuery（FormToWizard 插件）将任何网络表单变成强大的向导”

这是他的demo。

我没有使用过他的这个插件，但我知道他有我过去使用过的非常好的帖子。

我希望这会有所帮助。

编辑：

我最近使用了这个插件，效果很好。它使用简单，易于修改以满足我的特定需求。

【讨论】：

看起来很棒！我要去试试这个。
非常有趣，但我认为它不适用于浏览器后退按钮。
我写的一个简单的jquery插件，希望对大家有帮助..github.com/hirdeshvishwdewa/multiStepForm

【解决方案2】：

时间轴上的步骤看起来是均匀分布的。它可能就像将步数乘以宽度并除以步数以获得标记必须行进的距离一样简单。然后使用 jQuery.animate 对标记的位置进行动画处理。

桑德罗

【讨论】：

谢谢！我会试试的，我喜欢下一个标记的动画效果。
如果每个表单“step”都在
中，那么您可以通过拆分水平条、每个编号的圆圈和（显然）来动态构建 step 指示器标记到他们自己的图像中，使用 jQuery 找出表单中有多少步 (
) 并循环多次以使用上面解释的数学构建指标。标记被放置在当前步骤。

【解决方案3】：

这里你有一个完整的工作简单的三步示例，不需要 jQuery。

您只需要定义submit_form() 函数。 HTML 字符 &laquo; 和 &raquo; 只是分别打印 « 和 » 这对于上一个和下一个按钮字符可能很有趣。

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>

【讨论】：