如何构建多阶段Web表单？

Question

我正在尝试构建一个具有多个阶段的webform。我正在模仿Stack Overflow / Stack Exchange标记webform。问题是，我不确定如何触发“下一阶段”行动。

为了说明，如果想要在Stack Overflow上标记问题，请单击flag，然后弹出窗口会提示您进行选择。如果您选择第二个选项（“它不属于此处，或者它是重复的”），表单会自动将您带到第二个屏幕。

第一个屏幕：

点击后，它会自动重定向到：

问题在于我不知道底层触发器是什么。点击该单选按钮如何将最终用户发送到下一个屏幕？

我试过检查来源，但我感觉我只看到了一半的照片：

我发现没有任何HTML教程有任何与此类似的练习示例。我怀疑这是JavaScript，但我找不到会触发这些操作的链接.js文件。

所以：点击后网页表单如何自动重定向？作为后续工作，如果它使用的是JavaScript，我可以使用仅限HTML / CSS的解决方法吗？

Answer 1

在比框架更低的层次上思考这个问题可能会有所帮助。有两种方法可以制作多阶段形式。

第一种（通常是较旧的）方式是将状态存储在服务器上。表单的每个阶段实际上都是一个单独的表单，客户通过问卷调查的进度保存在服务器上（例如，作为会话数据的一部分）。

第二种方式（更现代的方法）就是使用JavaScript，正如您所怀疑的那样。在这种情况下，实际上很少有黑魔法，并且根本没有自动重定向点击。您所做的就是有一个非常长的表单，根据用户的选择显示/隐藏一些元素（当然，您可以有多个显示/隐藏的<form>元素。）

Answer 2

好吧，我会使用某种jQuery向导插件并根据我的需要进行调整。我最近这样做了，并没有那么难。您应该尝试使用SmartWizard 3.0，它非常活跃，最后一个版本大约是2个月前，编码器很快就回答了我的问题。

这是：https://github.com/mstratman/jQuery-Smart-Wizard

您可以触发向导前进到将事件链接到单击单选按钮的操作的下一步。

祝你好运：）