新窗口打开时选择消失

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

这会让你大部分时间到达那里。您需要绑定一个事件来触发可选问题框进行保存/关闭 - 这实际上只是隐藏该框并保留用户在表单中设置的值。