单击一次即可将多个表单提交到其他站点。（不支持AJAX。）

Question

我一直在使用 jQuery 通过使用此功能提交多个表单：

<script>
    var submitted = "";
    function submitAllForms() {               

        var i=0;

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

               submitted +=  $(this).submit();
               alert("submitted:"+i);

              i++;  
        });
    }

</script>';

但是，这并不能服从所有人。它只向一个站点提交和发布数据。换句话说，只发布了一个表单。

Answer 1

您不能通过这种方式在一个页面上提交多个表单。它总是会提交它遇到的第一个表单，因为提交表单后页面会刷新（post）。这种事情必须用 AJAX 或 JavaScript HTTPrequest 来完成。

您可以尝试一种方法，那就是将表单的目标设置为空白，这样一来提交就会打开一个新的选项卡或浏览器 window。这样您就可以提交所有表格。如果您想在除您以外的其他用户使用的应用程序中使用它，我必须警告您这一点，因为大多数浏览器会阻止由表单提交创建的弹出窗口。

Answer 2

答案更新

根据评论：

It worked on Firefox but doesn't work on Google Chrome

此问题与 dom 就绪事件有关。这在 Firefox 中不起作用。我用 Chrome、FF、Edge、IE 的最新版本测试了更改后的代码段。只有 FF 我需要使用事件加载而不是准备就绪。

一个可能的解决方案可以基于IFRAMES（如果你可以使用它们）：

使用独特的按钮提交所有表单
插入或创建一个 div 不可见的容器
为每个表单插入前一个 div iframe
将具有更新数据的相应表单的内容添加到此类 iframe
在相应的 iframe 中提交每个表单
注意清空容器...

片段：

function onIframeReady(doc, html) {
  doc.find('body').append(html);
  //
  // if it's needed to change the action atr use:
  // doc.find('form').attr('action', 'new ac');
  //
  doc.find('form').submit();
}

$(function () {
  $('#submitMoreForms').on('click', function(e){
    $('#frmWrapper').empty();
    $('form').each(function(idx, ele){
      $(ele).find(':input').each(function(index, element) {
        if (element.type == 'textarea') {
          $(element).text($(element).val());
        } else {
          $(element).attr('value', $(element).val());
        }
      });

      $('<iframe>', {
        id:  'frm' + idx
      }).appendTo('#frmWrapper').ready(function() {
        if (window.mozInnerScreenX == null) {  // if not firefox
          onIframeReady($('#frm' + idx).contents(), ele.outerHTML);
        }
      }).one('load', function(e) {
        if (window.mozInnerScreenX != null) { // if firefox
          onIframeReady($('#frm' + idx).contents(), ele.outerHTML);
        }
      });
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form action="action1" method="post">
  FORM1:<br/>
    Name: <input type="text" name="name" />
    Comment: <textarea name="comment"></textarea>
    <input type="checkbox" name="vehicle" value="Bike"> I have a bike
    <input type="checkbox" name="vehicle" value="Car" checked> I have a car
</form>
<form action="action2" method="post">
  FORM2:<br/>
    Name: <input type="text" name="name" />
    Comment: <textarea name="comment"></textarea>
</form>
<form action="action3" method="post">
  FORM3:<br/>
    Name: <input type="text" name="name" />
    Comment: <textarea name="comment"></textarea>
</form>

<input id="submitMoreForms" type="button" value="Submit More Forms" />
<div id="frmWrapper" style="display: none;"></div>

单击一次即可将多个表单提交到其他站点。（不支持AJAX。）

Submit multiple forms to other sites on a single click. (It does not support AJAX.)

jquery

forms

multiple-forms

单击一次即可将多个表单提交到其他站点。 （不支持AJAX。）

Submit multiple forms to other sites on a single click. (It does not support AJAX.)

jquery

forms

multiple-forms

单击一次即可将多个表单提交到其他站点。（不支持AJAX。）