2010-11-06 54 views
0

我目前正在进行一个项目,并且卡住了。根据客户要求,对现有表格进行了一些小修改。当新窗口打开时,选择消失

想象的HTML页面如下:

  • 我添加了一个新的表单元素命名的业务类型和有在10个选项。
  • 用户需要选择一个选项或多个选项并提交,数据将存储在数据库中。数据也被存储在数据库中。我已经检查过。
  • 窗体中还有一个按钮,打开一个小窗口以选择几个选项。当此窗口打开时,业务类型(在表单中)所做的选择将消失。如何防止这种情况发生?

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

+0

你能告诉我们你的代码吗?这不仅仅是将存储的选择从数据库中取出并用于相应地设置弹出窗口的标记吗? – 2010-11-06 11:35:58

+0

不能建议,直到你告诉我们如何打开孩子windown和填充它,以及如何发生儿童和父窗口之间的沟通。 – 2010-11-06 11:37:37

回答

0

这一切都可以在客户端完成。基本上,您可以创建一个包含所有您想问的问题的表单,然后使用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(); 
}); 

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