表单中的多个页面

Question

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

下面是表单应该做的事情：

首页

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

第二页

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

第三页

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

稍后，我将研究如何将所有这些存储到数据库中。但就目前而言，如果你能帮助构建这个表单，我将非常感激。

Answer 1

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

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

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

Answer 3

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