JavaScript如何实现点击主按钮提交所有同class名的表单

现有代码与问题 #

你当前的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();
}

失效原因 #

• document.getElementsByClassName("figure_filters") 返回的是匹配元素的集合（HTMLCollection），不是单个表单DOM对象，集合本身不存在submit()方法，直接调用会抛出JS错误
• 即便遍历集合逐个调用submit()，原生同步表单提交会立刻触发页面跳转，卸载当前页面运行环境，后续表单的提交动作会被直接中断，最终只会成功提交第一个表单

可用实现方案 #

方案1：合并所有表单数据单次提交（最推荐） #

不需要发送多次请求，把三个表单的有效字段全部收集后一次性提交，兼容性最好、性能最高：

function submit_all_forms() {
    // 获取所有目标表单，将类数组集合转为真数组方便遍历
    const formList = Array.from(document.getElementsByClassName("figure_filters"));
    // 创建临时表单承载所有待提交字段
    const mergeForm = document.createElement("form");
    mergeForm.method = "GET";
    mergeForm.action = window.location.pathname; // 替换为实际后端接收地址

    formList.forEach(form => {
        // 遍历每个表单内的可提交元素
        Array.from(form.elements).forEach(field => {
            // 仅复制带name属性的有效提交字段
            if (field.name) {
                mergeForm.appendChild(field.cloneNode(true));
            }
        })
    })

    // 挂载临时表单到页面、触发提交后移除
    document.body.appendChild(mergeForm);
    mergeForm.submit();
    document.body.removeChild(mergeForm);
}

方案2：异步逐个提交所有表单 #

如果确实需要分三次请求分别提交三个表单的数据，用异步请求方式实现，不会因为页面跳转中断后续提交：

async function submit_all_forms() {
    const formList = Array.from(document.getElementsByClassName("figure_filters"));
    for (const form of formList) {
        const formData = new FormData(form);
        // 拼接GET请求参数
        const searchParams = new URLSearchParams(formData).toString();
        const submitUrl = `${form.action || window.location.pathname}?${searchParams}`;
        // 等待当前表单提交完成再处理下一个
        await fetch(submitUrl, {
            method: form.method
        });
    }
    // 全部提交完成后的自定义逻辑，比如提示、跳转
    alert("全部表单提交完成");
}

内容的提问来源于stack exchange，提问作者logan_9997