0

我之前曾问过这个问题，但过了一段时间后，我觉得我必须更明确地处理所遇到的问题。

设想：

  • 1 个表格，2 个包含字段的 Fancybox。一个 Fancybox 包含“字段 1”，另一个包含“字段 2”。

对于期望的结果：

  1. 去http://testing.myautoiq.com/fancybox
  2. 点击“从主页提交”

您会注意到 field_1 和 field_2 的值都在 _POST 变量中返回。

产生错误 1：

  1. 单击“打开 FB 1”以查看 field_1
  2. 点击“从 FB 1 提交”

正如您将注意到的，仅返回 field_2。

产生错误 2：

  1. 单击“打开 FB 2”，您会看到 field_2
  2. 点击“从 FB 2 提交”

正如您将注意到的，仅返回 field_1。

随意挖掘源头，那里没有什么不寻常的地方。这是FB的问题吗？如果是这样，如何纠正？我要疯了在这里尝试。

4

1 回答 1

0

首先你必须了解fancybox是如何处理inline内容的：当你打开fancybox时，目标inline内容会从它在DOM中的位置“移动”到fancybox中（而是留下一个占位符）

...在您的情况下，这些字段被“移出”，form因此当您从fancybox 中提交它时，字段field_1或field_2不存在于其中，form因此它们无法返回任何值。

您需要重新编写代码的逻辑。我要做的是将fancybox内bind的链接提交给关闭fancybox的事件（将字段返回到它们在里面的位置）并在之后提交，所以而不是这些：formformform

<a href="#" onClick="document.testform.submit();">Submit from FB 1</a>

和

<a href="#" onClick="document.testform.submit();">Submit from FB 2</a>

会这样做

<a class="submit" href="#nogo" >Submit from FB 1</a>

和

<a class="submit" href="#nogo" >Submit from FB 2</a>

请注意，我添加class="submit"了处理来自此类选择器的事件。

然后，在脚本顶部创建一个标志（解释如下）

var subMitted = false;

和选择器bind的click事件.submit：

$(".submit").bind("click", function(){
  subMitted = true; // set to true when we click on the selector .submit only
  $.fancybox.close();
});

并将afterClose回调添加到您的 fancybox 自定义脚本

$(".fancybox").fancybox({
 afterClose: function(){
   // will submit if we clicked the selector .submit
   if(subMitted){
      subMitted = false; // re-initialize the flag
      $("form[name='testform']").submit();
   }
 }
});

如果subMitted是true，我们点击.submit选择器，所以我们将提交关闭后的formfancybox（我们不提交如果formfancybox是使用close按钮关闭的）

这样，您的表单将始终返回所有值，无论它是否从 fancybox 内部提交。

于 2012-09-27T00:36:50.793 回答