I have 3 forms with the same class name and would like to submit all of them when one master button is clicked. How would i go about doing this. (Not much experience with 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>
my JS function
function submit_all_forms() {
document.getElementsByClassName("figure_filters").submit();
}
You need to iterate all elements with the same class name.
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>If your goal is to use e.preventDefault();, please note that submit() will not work. Instead, you can use requestSubmit().