Javascript 单击一次iframe即可提交多个表单

有谁能帮我编写一些代码，只需单击一下就可以将所有表单提交到iframe？在我的实际代码中，我有5+个表单，所有表单都需要按一个按钮提交。我已经测试了提交一个表单，它正确地提交到iframe。必须有一种简单的方法，可能是一些jQuery在一个循环中提交所有表单

<form name="1398694471249" method="post" action="WuFoo.aspx" target="formresponse" id="1398694471249">
  <input type="hidden" name="Title" id="Title" value="Mr">
  <input type="hidden" name="FirstName" id="FirstName" value="Oliver">
  <input type="hidden" name="Surname" id="Surname" value="Clark">
  <input type="hidden" name="DateOfBirth" id="DateOfBirth" value="19861230">
</form>

<form name="1528632259273" method="post" action="WuFoo.aspx" target="formresponse" id="1528632259273">
  <input type="hidden" name="Title" id="Title" value="Mrs">
  <input type="hidden" name="FirstName" id="FirstName" value="Sarah">
  <input type="hidden" name="Surname" id="Surname" value="Bloggs">
  <input type="hidden" name="DateOfBirth" id="DateOfBirth" value="19750622">
</form>

<iframe name='formresponse' width='100%' height='100'></iframe>

<!-- I want to press this button and submit all forms within the iframe -->

<button type="submit">Submit both forms to iframe</button>

将这两个表格提交给iframe

---

如您所见，我有两个表单（它们是从localStorage中先前捕获的数据动态生成的），因此将有很多表单。我被告知我可以向iframe提交多个表单，但我不知道如何提交。感谢您的帮助。

除非您使用Ajax，否则您必须将每个表单发布到单个Iframe。如果使用单个iframe，您可能会在提交二级表单之前取消提交。

您可以执行以下操作：

$("form").each(function() {
  $(this).submit();
});

如果您不关心iframe的内容，可以制作一个假的iframe并将其加载到那里：

$("form").each(function() {

  var $form = $(this);
  var $iframe = $("<iframe name='temporary-iframe'></iframe>");

  var oldTarget = $form.prop("target");
  $form.prop("target", "temporary-iframe");

  $("body").append($iframe);
  $form.submit();
  $iframe.remove();
  $form.prop("target", oldTarget);

});

---

如果您遇到只有最后一个表单提交的问题，这可能意味着表单#在完成前在表单#1上踩2下，然后在表单#2上踩3下，然后在表单#3上踩4下，等等。如果您不关心iframe的内容，可以使用上述解决方案。如果您确实关心iframe的内容，则需要为“我应该显示哪个iframe？”想出一些算法。

是否要在每次提交之前等待iframe帖子的结果？您必须使用AJAX一次提交多个表单。正常表单提交会重新加载页面。@Barmar:iframe中的提交不会重新加载任何内容。太棒了，我现在已经可以很好地完成了。但是，我需要某种警报或进度条来通知用户表单仍在提交，或已完成提交。有什么想法吗？

$("form").each(function() {
  var oldTarget = this.target;
  var iframe = document.createElement("iframe");
  this.target = iframe.name = "temporary-iframe";
  document.body.appendChild(iframe);
  $(this).submit();
  $(iframe).remove();
  this.target = oldTarget;
});