Tengo 3 formularios con el mismo nombre de clase y me gustaría enviarlos todos cuando se hace clic en un botón maestro. ¿Cómo haría para hacer esto? (No mucha experiencia con JS)
HTML
<form method="GET" id="form1" class="figure_filters"> <label for="form1">Enter...</label> <input type="text" id="form1" name="form1"> </form> <form method="GET" id="form2" class="figure_filters"> <label for="form2">Enter...</label> <input type="text" id="form2" name="form2"> </form> <form method="GET" id="form3" class="figure_filters"> <label for="form3">Enter...</label> <input type="text" id="form3" name="form3"> </form> <button id="master_button" onclick="submit_all_forms() "> Submit </button>mi función JS
function submit_all_forms() { document.getElementsByClassName("figure_filters").submit(); }Debe iterar todos los elementos con el mismo nombre de clase.
document.getElementById('master_button').addEventListener('click', (e) => { e.preventDefault(); const figureFilters = document.querySelectorAll('.figure_filters'); for (let figureFilter of figureFilters) { figureFilter.addEventListener('submit', (e) => { e.preventDefault(); console.log(`${figureFilter.id} is submitted`) }); figureFilter.requestSubmit(); } }); <form method="GET" id="form1" class="figure_filters"> <label for="form1">Enter...</label> <input type="text" id="form1" name="form1"> </form> <form method="GET" id="form2" class="figure_filters"> <label for="form2">Enter...</label> <input type="text" id="form2" name="form2"> </form> <form method="GET" id="form3" class="figure_filters"> <label for="form3">Enter...</label> <input type="text" id="form3" name="form3"> </form> <button id="master_button"> Submit </button> Si su objetivo es utilizar e.preventDefault(); , tenga en cuenta que submit() no funcionará. En su lugar, puede usar requestSubmit() .