0

我一直在使用 jQuery 通过这个函数提交多个表单：

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

        var i=0;

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

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

              i++;  
        });
    }

</script>';

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

4

2 回答 2

1

答案更新

根据评论：

它适用于 Firefox，但不适用于 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>
于 2017-01-20T22:03:25.540 回答
1

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

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

于 2017-01-20T20:18:45.460 回答