Jquery - 一键提交所有表单

Posted 2023-05-08

【中文标题】Jquery - 一键提交所有表单

【英文标题】：Jquery - Submit all forms by one button

【发布时间】：2017-04-13 22:07:42

【问题描述】：

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 个表单，如上所示。 我的按钮不在我的任何形式中。 如何为我的所有表单设置一个提交按钮。我尝试了点击功能，但它不起作用。为什么？

【参考方案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>

一些笔记

此不会适用于具有文件上传功能的表单 (enctype="multipart/form-data") 您需要决定提交完成后要做什么（因为页面中的任何内容都不会改变）。 您不能在 ***-sn-ps 中提交表单，所以不要尝试在此处运行：)

【讨论】：

包装代码 sn-p 并说don't try to run this herelol

@TânNguyễn 只是为了使其可读（并支持复制到答案等...）:)

【参考方案2】：

我没有测试，但试试这个：

$("#allsubmit").on("click", function()
    $('.allforms').each(function()
        $(this).submit();
    );
); 

请注意，您的所有表单都必须具有class="allforms" 属性

【讨论】：

它不起作用。正在做类似刷新的事情，但我的价值观没有改变。我的 jquery 是 1.9.1 版本。

当您提交表单时，我会将您重定向到action，当您提交您所期望的所有表单时？​​span>

首先，它不会将我引导到任何地方。其次，当我尝试单独使用按钮时，它可以工作。所以发生了其他错误。通过提交，我希望从我的数据库中更改更新值。

这是不可能的。它行不通。您不能同时提交多个表单，除非您将它们合并到一个表单或请求中。

好的，这很有帮助。我会试试你说的。似乎有可能。