表单中的多个页面答案

【问题标题】：Multiple Pages in a Form表单中的多个页面
【发布时间】：2014-07-06 17:43:17
【问题描述】：

我最近为一个内容、图像和页面很少的客户构建了一个简单的网站。现在，他们希望在他们的网站上有一个表格（一个非常复杂的）。我只使用 Bootstrap 构建了他们的网站，因此，HTML、CSS 和 PHP 的基础知识就足够了。但是，我想不出构建这个表单的方法。

这是表单应该做的事情：

首页

显示表单字段让用户输入他们的姓名、电话号码和电子邮件地址。然后，提交按钮会将它们带到下一页。

第二页

有一个包含制造商名称的下拉列表。根据所选的制造商，另一个列表可让您选择产品。最后的下拉列表可让您选择型号。

第三页

此页面应显示所选型号独有的内容。例如，如果在上一页中选择了“Model X”，则此页会显示一组独特的字段。选择“Model Y”，您会得到一组不同的字段。

稍后我会弄清楚如何将所有这些存储到数据库中。但就目前而言，如果您能帮助构建此表单，我将不胜感激。

【问题讨论】：

有不同的方法来解决这个问题。如果您希望页面物理重新加载，您将使用类似 localStorage （或 cookie，或 sessionStorage 或其他）在页面之间存储数据，然后检查值以确定要显示的内容（或将其存储在服务器端 - 例如在 $ _会议）。或者，也有像thecodemine.org（第一次谷歌点击，搜索“多步骤表单”以获得更多信息）这样的流行解决方案，它们通过将所有内容放在一个页面上（并且一次只显示一个步骤）来工作。希望这有助于您入门！

标签： javascript php jquery html forms

【解决方案1】：

您可以使用 GET 和 POST 方法处理变量，也可以将变量保存在 SESSION 中。

所以，当您可以在链接页面中处理这些变量时。在您的表单中，您可能会使用隐藏输入再次发送另一个页面以再次处理此变量。在流程结束时，您可以更新或保存您的实体或实体在您的数据库中。

【讨论】：

【解决方案2】：

阿贾克斯。

您可以使用 ajax 并在会话中保存数据以等待最后一步。

jQuery Ajax POST example with PHP

显示 cssRules。

http://jsbin.com/vofoz/1/edit

您为每个步骤制作 div 并使用 JS 显示下一步。像这样：

<form>
    <div id="step1">
        step 1
        <input type="button" value="next >" />
    </div>
    <div id="step2" style="display:none;">
        step 2
        <input type="button" value="next >" />
    </div>
    <div id="step3" style="display:none;">
        step 3
        <input type="submit" />
    </div>
</form>

示例（javascript）：

$("form div > input[type=button]").click(function () {
    $(this).parent().hide();
    $(this).parent().next().show();
});

【讨论】：

【解决方案3】：

我会将所需的所有内容包含在一个大表单中，然后显示/隐藏内容以对表单进行分页。这将通过将所有内容分组到一个 POST 中来减少对服务器的请求。只要有一个<form>标签包裹一切，就相对简单了。

【讨论】：