CODEWITHSUNDEEP
javascripthtmlformsfunctiondom
logan_9997
logan_9997

Reputation: 619

JS how to submit all forms with the same class name

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();
}

Upvotes: 1

Views: 586

Answers (1)

Reza Saadati
Reza Saadati

Reputation: 5429

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().

Upvotes: 1

Related Questions