Question

之前我曾经问过这个问题，但过了一段时间后，我觉得我必须在经历的问题上更加明确。

情景：

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

FOR FORIREDED RESULT：

转到http://testing.myautoiq.com/fancybox
点击“从主页面提交”

正如您将注意到，在_POST变量中返回了field_1和field_2的值。

产生错误1：

点击“打开FB 1”查看field_1
点击“从FB 1提交”

正如您将注意到的那样只返回field_2。

产生错误2：

点击“打开FB 2”，你会看到field_2
点击“从FB 2提交”

正如您将注意到的那样，只返回field_1。

随意在源头挖掘，没有任何与众不同的东西。这是FB的问题吗？如果是这样，怎么能纠正？我在这里试着疯了。

Answer 1

首先，您必须了解fancybox如何处理inline内容：当您打开fancybox时，目标inline内容从其在DOM中的位置“移动” fancybox（改为占位符）

...在您的情况下，字段会在form之外“移动”，因此当您从fancybox中提交字段时，字段field_1或field_2都不存在在form内，因此他们无法返回任何价值。

您需要重新编写代码的逻辑。我要做的是bind将fancybox中的form提交到关闭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;

选择器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选择器，以便我们在关闭fancybox之后提交 form（我们不会提交使用form按钮关闭close IF fancybox

这样，无论是否从fancybox内部提交，您的表单都会返回所有值。

2包含单独表单值的Fancybox不提交（测试页）

1 个答案: