如何使用单个提交按钮提交多个表单？答案

【问题标题】：How to submit multiple forms with a single submit button?如何使用单个提交按钮提交多个表单？
【发布时间】：2021-08-11 11:28:00
【问题描述】：

这是我的代码摘要

<form class=”form1” action=”action.php” method=”POST”>
    //some code
</form>
<form class=”form2” action=”action.php” method=”POST”>
    //some code
</form>
<form class=”form3” action=”action.php” method=”POST”>
    //some code
</form>
<button id=”submit” type=”submit” name=”submit_changes”>Save Changes</button>

假设脚本提交所有表单

<script>

document.getElementById('submit').addEventListener('click', function() {
  // check for and report errors here
  for (var i = 0; i < document.forms.length; i++) {
    document.forms[i].submit();
  };
  console.log(document.forms.length);
});

</script>

我意识到单击“保存更改”按钮后，我的 action.php 似乎只处理最后一个表单，即具有类属性的表单 class= “form3” 我意识到表单标签是一个异步函数。如果一个人在他的文件中有许多表单，并且只有一个提交按钮，那么提交按钮将不会提交所有表单，而是提交最后一个，因为它是异步的。我是一名自学成才的网络开发人员，欢迎任何更正或解决方案。自从我试图解决这个问题以来已经一周了。

【问题讨论】：

stackoverflow.com/questions/7843355/…
你想做的事情并没有多大意义。您所有的表单都具有相同的action 值。为什么不只有一个形式？
这个问题和mysql有什么关系？还有与php的关系在哪里？
这能回答你的问题吗？ javascript Submit multiple forms with one button
我不认为任何事情都会奏效，因为一旦您提交表单，HTTP 重定向就已经发生，其余的 JS 将不会执行后记。唯一的方法可能是为每个表单使用 iFrame（或者可能是不同的框架！）。

标签： javascript html forms

【解决方案1】：

你可以试试：

<form class=”form1” id="form1" action=”action.php” method=”POST”>
    //some code
</form>
<form class=”form2” id="form2" action=”action.php” method=”POST”>
    //some code
</form>
<form class=”form3” id="form3" action=”action.php” method=”POST”>
    //some code
</form>
<button id=”submit” onCLick=handleMultipleSubmit() name=”submit_changes”>Save Changes</button>

并且在脚本标签中：

<script>
  function handleMultipleSubmit(){
    document.getElementsById("form1").submit();
    document.getElementsById("form2").submit();
    document.getElementsById("form3").submit();
  }
</script>

希望这对你有用

【讨论】：

【解决方案2】：

我相信这段代码应该可以工作。我所做的是我将其中一个表单类设为相同（'form'），然后我发现你的整个 sn-p 中有多少表单。接下来，我遍历它们并提交了每一个。我相信这段代码应该可以正常工作。

function submit(){
  let forms = document.getElementsByClassName("form");
  for(var i =0; i < forms.length; i++){
    forms[i].submit();
  }
}

<form class="form 1" action="action.php" method="POST">
    //some code
</form>
<form class="form 2" action="action.php" method="POST">
    //some code
</form>
<form class="form 3" action="action.php" method="POST">
    //some code
</form>
<button id="submit" type="submit" onclick="submit()" name="submit_changes">Save Changes</button>

【讨论】：