填写并添加选择选项并与数据库同步

时间:2013-07-24 11:29:52

标签: javascript forms popup

我是JavaScript的新手,我正在努力实现一些我认为不应该非常复杂的东西。

我想做的是:

  • 表单在浏览器中打开,并带有数据库中记录的下拉列表
  • 如果所需选项不在列表中,则用户可以单击其旁边的链接以向数据库添加新条目
  • 这将打开一个新窗口,其中包含此条目的附加表单
  • 单击提交时,将运行处理脚本以将此信息插入数据库
  • 当处理脚本完成后,窗口将关闭,下拉列表将刷新,以便包含新选项(但不会丢失表单中的任何其他信息)

也许列表刷新的最后一件事情非常复杂(除非列表实际上仅在点击时从数据库加载?)但其他一切应该足够简单,我想。我已经尝试了各种各样的东西,但没有任何东西足够接近值得在这里发布。

有人可以给我一些关于我应该使用的功能以及大致如何实现它们的想法吗?我不一定需要精确的代码,只需要一个可以工作的框架。 (无论如何,我会在那个案例中学到更多。)

ETA:我应该补充一点,我一直在尝试使用window.open()和window.close()。我真的不知道这是不是最好的方法吗?

1 个答案:

答案 0 :(得分:1)

不,这不是(至少相对)复杂的。您需要的是jQueryjQuery UI(这些框架只是建议,如果您愿意,您可以选择任何其他框架)来实现这一目标。所以......

  

表单在浏览器中打开,并带有数据库中记录的下拉列表

这部分很简单,只是一个简单的html表单,上面带有select标记和add链接/按钮。您将需要一个JavaScript函数来刷新数据库中的选择选项。为此我建议thisthis - 网上有很多其他人 - 帖子。

  

如果所需选项不在列表中,则用户可以单击链接   在它旁边添加一个新的条目到数据库

     

这将打开一个新窗口,其中包含此条目的附加表单

执行此操作的简单方法是使用jQuery UI Dialog Widget使用新表单打开弹出窗口

  

单击提交时,将运行处理脚本以将此信息插入数据库

在该表单上,您必须使用jQuery Ajax通过您的服务器语言(PHP,ASP.Net,JSP,等等......)将数据发送到数据库。一些示例herehere

  

当处理脚本完成后,窗口将关闭,下拉列表将刷新,以便它包含新选项(但不会丢失表单中的任何其他信息)

因此,当数据处理完成后,您可以调用之前创建的刷新选择函数并关闭ajax success回调上的对话框。示例here

就是这样。现在取决于你。希望它有所帮助。