Jquery - 通过一个按钮提交所有表格

Question

HTML:

<form class="allforms" method="POST" action="/auth/myaccount/personal">
  <input type="hidden" name="_method" value="PATCH">
...
</form>

<button id="allsubmit" class="btn btn-info">Continue</button>

jQuery的:

$(document).ready(function(){
$("#allsubmit").click(function(){
        $('.allforms').submit();
    }); 
});

我在上面的html代码中有3个表单.我的按钮不在我的任何表格中.如何为我的所有表单提供一个提交按钮.我尝试了点击功能,但它不起作用.为什么？

Answer 1

表单提交是一个同步操作,因此当您提交表单然后立即在页面中提交其他表单时,第一个表单的提交将被取消.

你可以做的是确保表单是异步提交的(使用ajax):

$(function() {
    $("#allsubmit").click(function(){
        $('.allforms').each(function(){
            valuesToSend = $(this).serialize();
            $.ajax($(this).attr('action'),
                {
                method: $(this).attr('method'),
                data: valuesToSend
                }
            )
        });
    });
});

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

<form class="allforms" method="POST" action="">
  <input type="hidden" name="_method" value="PATCH1">
  <input type="submit" />
</form>

<br />
<form class="allforms" method="POST" action="">
  <input type="hidden" name="_method" value="PATCH2">
  <input type="submit" />
</form>

<br />
<form class="allforms" method="POST" action="">
  <input type="hidden" name="_method" value="PATCH3">
  <input type="submit" />
</form>

<br />
<button id="allsubmit" class="btn btn-info">Continue</button>

几点说明

1. 这不适用于具有文件上传的表单(enctype ="multipart/form-data")
2. 提交完成后,您需要决定要做什么(因为页面中的任何内容都不会更改).
3. 你不能在stackoverflow-snippets中提交表单,所以不要试图在这里运行:)