Question

我有一个带有表单的页面，我在iframe中加载了一些元素，其中一个是HTML页面，里面有另一个表单。我尝试了一些事情，但我似乎无法找到同时提交两种表格的好方法。

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

Answer 1

Target表单名称为iframe

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

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

Answer 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或将所有内容复制到隐藏的表单并提交。后者的优点是它看起来和感觉就像你只是提交表单，缺点是你必须复制所有表单元素，这是乏味的。