Question

我目前正在开展一个项目，但我被困住了。根据客户要求，对现有表单进行了少量修改。

想象一下HTML页面如下：

我添加了一个名为Business Type的新表单元素，其中有10个选项。
用户需要选择一个选项或多个选项并提交，数据将存储在数据库中。数据也存储在数据库中。我检查过了。
表单中还有一个按钮，可以打开一个小窗口来选择几个选项。当此窗口打开时，“业务类型”（在表单中）中所做的选择将消失。如何防止这种情况发生？

我正在尝试使用会话。但有没有更好更简单的方法来实现这一目标？我想保留所做的多项选择。

Answer 1

这一切都可以在客户端完成。基本上，您创建一个包含您想要问的所有问题的表单，然后使用JavaScript来显示额外的问题。如果用户没有单击按钮来打开额外的问题，他们只会保持其空值。如果他们确实打开了额外的问题，将在页面上弹出，用户将填写输入。一旦完成这些问题，您只需隐藏它们，但它们仍然保留用户设置的值。

所以将可选字段放在表单中的隐藏div中，然后在单击按钮时显示该div。

<form ...>
... required inputs
...
...
<a href="#" id="show-optional-inputs">Ask more questions</a>
<div id="optional-inputs" style="display: none;">
    <input ... />
    <input ... />
    <a href="#" id="save-optional-inputs">'Save' optional questions</a>
</div>

<input type="submit" value="submit" />

然后，给#optional-inputs一些CSS（或者你可以随意设置它的样式）：

#optional-input {
   left: ...px;
   position: absolute;
   top: ...px;
   width: ...px;
}

对于打开其他问题的按钮/链接，添加一些JavaScript / jQuery以将div打开为绝对定位窗口。

$('#show-optional-inputs').click(function(e) {
    $('#optional-inputs').show();
    e.preventDefault();
});

这将使你大部分在那里。您需要绑定一个事件来触发可选问题框以保存/关闭 - 这实际上只是隐藏了框并保留了用户在表单中设置的值。

新窗口打开时，选择消失

1 个答案: