如何在同一个if判断中执行多个表单提交操作，当前仅最后一个生效

问题根因 #

你当前代码只会执行最后一次提交的核心原因是：原生表单调用submit()方法后，浏览器会立即触发页面跳转/重载逻辑，前面的提交请求会被后续的操作打断，同时页面即将卸载时浏览器会优先处理最后一个提交动作，所以前三次提交都不会生效。

解决方案 #

方案1：使用fetch异步提交（推荐，无需修改HTML结构） #

直接读取表单数据，并行发送4个POST请求，不会触发页面跳转，所有请求都可以正常执行：

if (test == 1) {
    const form = document.getElementById("opciones");
    const formData = new FormData(form);
    // 逐个提交四个地址
    ['1ExcelArchivos.php', '2ExcelArchivos.php', '3ExcelArchivos.php', '4ExcelArchivos.php'].forEach(url => {
        fetch(url, {
            method: 'POST',
            body: formData
        });
    });
}

如果需要等所有请求完成后再做后续操作，可以用Promise.all包裹处理。

方案2：用隐藏iframe承接表单提交（兼容老式浏览器） #

先在HTML里添加4个隐藏的iframe：

<iframe name="iframe1" style="display:none"></iframe>
<iframe name="iframe2" style="display:none"></iframe>
<iframe name="iframe3" style="display:none"></iframe>
<iframe name="iframe4" style="display:none"></iframe>

然后修改JS逻辑，每个提交对应不同的target指向iframe：

if (test == 1) {
    const form = document.getElementById("opciones");
    // 提交第一个地址
    form.action = '1ExcelArchivos.php';
    form.target = 'iframe1';
    form.submit();
    // 提交第二个地址
    form.action = '2ExcelArchivos.php';
    form.target = 'iframe2';
    form.submit();
    // 提交第三个地址
    form.action = '3ExcelArchivos.php';
    form.target = 'iframe3';
    form.submit();
    // 提交第四个地址
    form.action = '4ExcelArchivos.php';
    form.target = 'iframe4';
    form.submit();
}

这种方式不会触发当前页面跳转，四个提交请求都可以正常发送到对应后端地址。

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