一个表单中的多个页面

Multiple Pages in a Form

本文关键字：表单 一个      更新时间：2023-09-26

我最近为一个客户建立了一个简单的网站，只有很少的内容，图片和页面。现在，他们想要一个表单(非常复杂的)在他们的网站上。我只用Bootstrap建立了他们的网站，所以，HTML, CSS和PHP的基础知识就足够了。但是，我想不出一个方法来构建这个表单。

表单应该做的是:

第一页

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

第二页

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

第三页

该页应该显示所选型号的唯一内容。例如，如果在上一页中选择了"Model X"，该页将显示一组唯一的字段。选择"Model Y"，你会得到一组不同的字段。

我稍后会弄清楚如何将所有这些存储到数据库中。但是现在，如果你能帮助建立这个表单，我将非常感激。

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

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

Ajax

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

jQuery Ajax POST示例

显示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();
});

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

相关文章：