当我在父级上提交表单时如何提交 iframed 表单（使用 jquery）

Question

我有一个带有 iframe 的“详细信息”部分的表单。请看这里：

[已删除网址] 点击添加项目，

然后您会看到您可以输入前 5 个字段并点击更新。这些将按预期保存。

尝试将一些数据添加到“年份”部分（填写所有字段），然后单击“保存并添加”。这将保存您的编辑并添加新记录进行编辑。这是 iframe 中的。

现在。我的问题是，如果我完成前 5 个字段，然后输入年份信息，但不要点击“保存并添加”，只点击“更新”它不会提交 iframe 和数据里面的东西会丢失。

任何关于我如何制作这个表格的建议也提交内部表格。 我已经试过了：

<script>
$(function(){
   $('#item_edit').submit(function(){
       alert('try');
 $('iframe').first().contents().find('.form').submit();
   });
});
</script>

事实上，这是目前在表单上的，它不起作用。它会运行，但它不想提交。另外，如果我手动运行$('iframe').first().contents().find('.form').submit();，那么它将提交并保存详细/复古表单的内容。所以我认为父表单在子表单有机会之前提交。

关于如何避免这种情况的任何想法？

杰森

Answer 1

您链接到的页面已消失，因此我无法查看您的完整示例。但这里有一些想法需要考虑......

当我做这种事情时，我一般会避免在 iframe 中构建子表单。相反，我将所有字段放入一个表单中。如有必要，新字段会以相同的形式动态添加。

然后，您可以根据需要提交整个表单——这部分变得容易。

如果您只需要提交表单的一部分，您可以在提交时“挑选”您想要的字段。

要进行这种“精选”提交，只需创建一个新的隐藏 iframe，其中包含一个表单；然后使用 [jQuery 的.clone() 函数] 复制您关心的字段，并将副本填充到您的新隐藏表单中；最后，只需提交您的隐藏表单。

here's a quick example 是由我的一些旧代码拼凑而成的。

---

另一种方法

也许您可以将我的方法的一个方面与您的代码结合起来，就像现在一样……您已经在自己的 iframe 中获得了子表单——而且一切正常。问题是您需要将子表单数据与主表单数据一起发送出去。

所以你可以使用我上面描述的clone()——但方向相反。单击更新按钮时，只需clone() iframe 内的所有内容，并将其转储到主窗体内的隐藏 div 中。然后继续，让表单提交，并带上 所有 数据。只需确保您的元素名称在两种形式中都是唯一的（因为所有内容最终都会以相同的形式结束）。

可能是这样的：

$(function(){
   $('#item_edit').submit(function(){
       alert('try');
       var frmContents = $('iframe').first().contents().find('form > *').clone(true);
       var el = $('<div></div>');
       el.append( frmContents );
       el.css('display','none');
       $('#item_edit').append( el );
   });
});