如何单击一个按钮同时触发多个表单/提交按钮

Question

我有一些选项卡，每个选项卡都包含自己的表单和自己的提交按钮。我想通过单击一个按钮来触发所有表单并发送每个表单的请求。该按钮本质上应该单击每个表单的每个单独的提交按钮（在这种情况下，该按钮将是类“submit_all”的按钮。html：

div class="tab-content" id="tab_content_one"
 div id="#tab1" class="tab-pane fade in active"  
        = form_tag({ action: "route1" }, method: method) 
          .form-group  
            textarea.form-control  name="words" 
          input.btn.btn-primary type="submit" class="submit" 
 div id="tab2" class="tab-pane fade"  
         = form_tag({ action: "route1" }, method: method)  
          .form-group  
            textarea.form-control  name="words" 
          input.btn.btn-primary type="submit" class="submit" 
 div id="tab3" class="tab-pane fade"  
         = form_tag({ action: "route1" }, method: method) 
          .form-group  
            textarea.form-control  name="words" 
         input.btn.btn-primary type="submit" class="submit" 
input.btn.btn-primary type="submit"  class="submit_all" onclick="goBack()"

我尝试使用 javascript 检索每个表单的所有提交按钮并迭代然后单击每个提交按钮，但这不起作用，最终只发出了最终表格。

function goBack() {
var submit2 = document.getElementsByClassName('submit')

console.log(submit2)
for (i=0; i<=(submit2.length); i++){
  submit2[i].click()
}

我做错了什么吗？

Answer 1

如果您在所有表单上发送 form.submit() 事件（或提交按钮上的 button.click()），则只能提交一个表单，具体取决于表格是如何构建的。

要从所有表单获取数据，您可以使用 new FormData 收集它们(FormElement) 并使用 [...formData.entries()] 序列化它们。

submitAll.onclick = () => {
  const data = [ ...new FormData(form1).entries(), ...new FormData(form2).entries() ];
  // place your logic here...
  // for example a fetch() or websocket.send() request
  console.log(data);
}

<form id="form1" onsubmit="event.preventDefault(); return false;">
  <input type="text" name="customForm1Text" value="something">
  <input type="submit">
</form>

<form id="form2" onsubmit="event.preventDefault(); return false;">
  <input type="text" name="customForm2Text" value="text">
  <input type="number" name="customForm2Number" value="1">
  <input type="date" name="customForm2Date">
  <input type="submit">
</form>

<button id="submitAll">Submit both forms at once</button>