2 包含单独表单值的花式框不会提交(测试页)

Question

我之前问过这个问题，但过了一段时间，我觉得我必须在遇到的问题上更明确一点。

场景：

• 1 个表单，2 个包含字段的花式框。一个花式框包含"字段 1"，另一个包含"字段 2"。

对于期望的结果：

1. 转到 http://testing.myautoiq.com/fancybox
2. 点击"从主页提交">

正如您将注意到的那样，field_1 和 field_2 的值都以 _POST var 的形式返回。

要生成错误 1：

1. 点击"打开FB 1"查看field_1
2. 点击"从FB 1提交">

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

要生成错误 2：

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

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

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

Answer 1

首先，您必须了解fancybox如何处理inline内容：当您打开fancybox时，目标inline内容将从其在DOM中的位置">移动"到fancybox中(而是留下占位符)

。在您的情况下，字段被"移"出form因此当您从 Fancybox 中提交它时，form中不存在字段field_1或field_2，因此它们无法返回任何值。

您需要重写代码的逻辑。我要做的是将提交fancybox中form的链接bind到关闭fancybox的事件(将字段返回到form中的位置)并在之后提交form，因此而不是这些：

<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;

并向选择器.submitbindclick事件：

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

如果subMittedtrue，我们点击了.submit选择器，所以我们将在关闭花式框后提交form(我们不会提交form如果使用close按钮关闭花式框)

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