一键提交多个表单到 iframe

Posted 2023-05-09

【中文标题】一键提交多个表单到 iframe

【英文标题】：Submit multiple forms with one click to an iframe

【发布时间】：2014-06-15 15:53:13

【问题描述】：

有人可以帮助我编写一些代码，只需单击一下即可将我的所有表单提交到 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 提交多个表单，但我不确定如何。感谢所有帮助，谢谢。

【问题讨论】：

是否要等iframe post的结果再互相提交？

您必须使用 AJAX 一次提交多个表单。正常的表单提交会重新加载页面。

@Barmar : 在 iframe 中提交不会重新加载任何内容。

【参考方案1】：

你也许可以这样做：

$("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);

);

上面的例子有一些小的性能问题。如果这对您来说运行得太慢（只有当您有 ton 的表单时才会发生这种情况：

$("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;
);

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

【讨论】：

太棒了，我现在一切正常。但是，我需要某种警报或进度条来通知用户表单仍在提交或完成提交。有什么想法吗？

【参考方案2】：

除非您使用 Ajax，否则您必须将每个表单发布到单独的 iframe。如果您使用单个 iframe，您可能会在提交完成之前通过提交辅助表单取消提交。