在 iframe 中提交字段

Posted 2023-05-09

【中文标题】在 iframe 中提交字段

【英文标题】：Submit fields inside an iframe

【发布时间】：2013-11-17 13:49:28

【问题描述】：

我有一个带有表单的页面，我在 iframe 中加载了一些元素，其中一个是 html 页面，其中包含另一个表单。我尝试了一些方法，但似乎找不到同时提交两个表单的好方法。

我在这里看到一个问题，建议摆脱子表单并将其内容动态添加到父表单，但我不愿意使用该方法，因为我需要 iframe（它有时会加载其他内容）和表单（它在另一种情况下使用）。

【参考方案1】：

Targetiframe名字的表格

<iframe name="open"></iframe>

<form target="open"></form>

【参考方案2】：

简单来说：您不能在 HTML 中拆分表单。如果你这样做：

<form>
    <input type="text" name="foo" value="bar" />
</form>
<form>
    <input type="submit" value="submit" />
</form>

点击按钮会触发第二个表单，你不会看到foo。

这是您案例的简化形式。 iframe 将您的表单拆分。

有一种方法可以将它们重新缝合在一起，但这并不容易。

覆盖您正在提交的表单的onsubmit 处理程序（具有按钮的处理程序，如果两者都有按钮：两者都做）。使用event.preventDefault() 取消活动。

收集您要使用 javascript 提交的所有值。父窗体中的所有值，以及 iframe 中的所有值。

现在你有两个选择。要提交您的数据，您可以使用 AJAX 或将所有内容复制到隐藏表单并提交。后者的优点是它看起来和感觉就像您只是在提交表单，缺点是您必须复制所有表单元素，这很乏味。

【讨论】：

我尝试按照您的方法进行操作，[此代码][1] 对我来说效果很好：[1]：pastebin.com/jjLP237S