代码之家 › 专栏 › 技术社区 › Jason

如何在父级上提交表单时提交iframed表单(使用jquery)

submit iframe forms jquery

Jason · 技术社区 · 14 年前

[已删除URL] 单击“添加项目”,

然后您将看到您可以键入前5个字段并点击update。这些将按预期节省。

尝试将一些数据添加到“葡萄酒”部分(填写所有字段),然后单击“保存并添加”。这将保存您的编辑并添加新的记录以供编辑。这是我插进去的。

现在。我的问题是,如果我填写了前5个字段,然后输入年份信息,但是单击“保存并添加”,仅单击“更新”不会提交iframe,其中包含的数据将丢失。

任何关于我如何使这个变形的建议也提交了内部表单。我已经试过了:

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

事实上,这是目前的形式,它不起作用。它将运行,但不想提交。另外,如果我手动运行 $('iframe').first().contents().find('.form').submit();

关于如何避免这种情况有什么想法吗?

杰森

1 回复 | 直到 14 年前

Lee 14 年前

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

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

如果需要的话,可以将整个表单作为一个整体提交--这一部分变得很容易。

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

要进行这种“樱桃挑选”提交,只需创建一个新的隐藏iframe,其中包含一个表单;然后使用[jQuery's .clone() 功能]复制您关心的字段,并将副本填充到新的隐藏表单中;最后,只需提交您的隐藏表单。

here's a quick example 那是我用一些旧代码拼凑出来的。

也许你可以把我的方法和你的代码结合起来,就像今天一样。。。你已经在自己的iframe中有了子表单——这一切都有效。问题是需要子表单数据与主表单数据一起发送。

所以你可以用 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 );
   });
});