[英]Jquery - Submit all forms by one button
网址:
<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>
查询:
$(document).ready(function(){
$("#allsubmit").click(function(){
$('.allforms').submit();
});
});
我的 html 代码中有 3 个表单,如上所述。 我的按钮不在我的任何表单中。 如何为我的所有表单设置一个提交按钮。 我尝试了点击功能,但它不起作用。 为什么?
表单提交是一种同步操作,因此当您提交表单然后立即在页面中提交其他表单时,第一个表单的提交将被取消。
你可以做的是确保表单是异步提交的(使用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>
几点说明
- 这不适用于具有文件上传的表单(enctype =“multipart / form-data”)
- 提交完成后,您需要决定要做什么(因为页面中的任何内容都不会更改)。
- 你不能在stackoverflow-snippets中提交表单,所以不要试图在这里运行:)
我没有测试它,但试试这个:
$("#allsubmit").on("click", function(){
$('.allforms').each(function(){
$(this).submit();
});
});
请注意,您的所有表单都必须具有class="allforms"
属性
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.