JS如何以同一班级名称提交所有表格

Question

我有3种具有相同类名称的表格，并想在单击一个主按钮时提交所有表格。我该怎么做。 （对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>

我的JS功能

function submit_all_forms() {
    document.getElementsByClassName("figure_filters").submit();
}

Answer 1

您需要以相同的类名来迭代所有元素。

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>

如果您的目标是使用e.preventDefault（）;，请注意，crumites（）将无法使用。相反，您可以使用requestSubmit（）。