Tengo algunas pestañas, cada una con su propio formulario y su propio botón de envío. Quiero activar todos los formularios y enviar solicitudes para cada formulario con solo hacer clic en un botón. Ese botón debería esencialmente hacer clic en cada botón de envío individual para cada formulario (en este caso, ese botón sería el botón con la clase "submit_all". El 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()"Intenté usar javascript para recuperar todos los botones de envío para cada uno de los formularios e iterar y hacer clic en cada botón de envío, sin embargo, eso no funcionó. Terminó disparando solo la forma final.
function goBack() { var submit2 = document.getElementsByClassName('submit') console.log(submit2) for (i=0; i<=(submit2.length); i++){ submit2[i].click() }¿Estoy haciendo algo mal? y ¿de qué otra manera puedo hacer esto?
Si envía un form.submit() (o button.click() en el botón de envío) en todos los formularios, solo se puede enviar un formulario, dependiendo de cómo se creen los formularios.
Para obtener los datos de todos los formularios, puede recopilarlos con el nuevo FormData(FormElement) y serializarlos usando [...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>