如何在单击一个按钮的同时启动多个表单/提交按钮

Question

我有一些选项卡，每个选项卡都包含自己的表单和提交按钮。我想关闭所有的表格，点击一个按钮就可以发送每个表格的请求。这一个按钮实际上应该点击每个表单的每个单独的提交按钮(在这种情况下，该按钮将是类为"submit_all"的按钮

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()(，则根据表单的构建方式，只能提交一个表单。

要从所有表单中获取数据，您可以使用新的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>