javascript - 使用 Jquery Fancybox 提交表单，然后将值附加到父文本字段

Question

我有一个 jQuery 自动完成字段，用于选择客户的电子邮件地址。旁边是一个允许用户创建新客户端的按钮。为了避免客户被带走他们已经填写了一半的表格，我在灯箱中打开表格。 输入 jQuery Fancybox。

新的客户端添加表单位于 jQuery FancyBox 中(因此它实际上是 iframe 中的外部页面)。

一旦用户提交表单，他们将被重定向到一个页面页面，其中包含 parent.$.fancybox.close(); 脚本，然后关闭 fancybox

我怀疑这是关闭灯箱的好方法。理想情况下，我希望从提交按钮触发操作，但随后我必须考虑如果表单未通过服务器端验证会发生什么......无论如何，转到我的主要问题。

假设用户已成功添加，我现在希望将他们的姓名和电子邮件地址自动插入到父页面上的原始自动完成字段中。

这将涉及框架之间的某种交互，这是我不知道的事情，Google 也无法帮助我。

这可能吗？如果可以，请给我举个例子或为我指明正确的方向。

这里有一些代码可以让您大致了解调用 fancybox lightbox 的父页面，最终需要将新创建的用户的电子邮件和名称传回给它。

<tr id="client-add">
 <td>Billing Client:</td>
 <td><input type="hidden" value="" name="client_id" /><input type="text" id="addClient" name="client_name" value="" style="width: 200px;" /><red>*</red> <a class="iframe" href="/clients/add_lightbox"><img src="/images/16x16/user_add.png" border="0"/> Create New Client</a>
 </td>

谢谢。

蒂姆

Answer 1

我会使用带内联模式的 fancybox 而不是 iframe。所以基本上你应该把你的“创建客户端”表单放在一个隐藏的 div 中，在你拥有其余客户端选择器 GUI 的同一页面中。一旦采用这种方法，您就可以轻松地从 fancybox 表单与主页的 DOM 进行交互，因为它们本质上是同一 DOM 结构的一部分。此外，您可以将自动完成刷新操作绑定(bind)到 fancybox 的 onClosed 事件。

修改您的原始代码，像这样的东西应该可以解决问题(未经测试):

<tr id="client-add">
 <td>Billing Client:</td>
 <td>
     <input type="hidden" value="" name="client_id" />
     <input type="text" id="add_client" name="client_name" value="" style="width: 200px;" /><red>*</red>
     <a id="add_client" href="#create_client_div"><img src="/images/16x16/user_add.png" border="0"/> Create New Client</a>
 </td>
</tr>

...然后在您页面的某处:

<div id="create_client_div" style="display: none;">
  <form name="new_client" ...>
  </form>
</div>

你只需按照通常的方式绑定(bind)你的 fancybox，就像你使用 iframe 类型的框一样:

$("a#add_client").fancybox({ ... });

这样您就可以在创建客户端表单和页面的其余部分之间自由交互。