JavaScript 兩個 Form 同時提交：target=_blank 或 AJAX 異步解決瀏覽器單一導航限制

現象

JS 循環調用 form1.submit(); form2.submit();，只有第二個生效，頁面跳轉到第二個 action。

原因

瀏覽器**同一時刻只能導航到一個 URL**。同步提交多個 Form 相當於連續導航，後者覆蓋前者。

解決方案

1. 不同 target 打開新窗口/iframe

<form id="f1" action="/api1" target="_blank">...</form>
<form id="f2" action="/api2" target="hidden_iframe">...</form>
<iframe name="hidden_iframe" style="display:none"></iframe>
<script>
document.getElementById('f1').submit();
document.getElementById('f2').submit();
</script>

2. AJAX 異步提交 (推薦)

function submitForm(formId) {
    var $form = $('#' + formId);
    $.ajax({
        url: $form.attr('action'),
        method: $form.attr('method'),
        data: $form.serialize(),
        success: function(resp) { console.log(formId, resp); }
    });
}
submitForm('f1');
submitForm('f2');

3. 合併為單一請求

若業務允許，後端提供批量接口，前端一次性發送所有數據。

總結

同步 Form 提交無法並行，**AJAX 是現代標準解法**，或利用 target 區分導航上下文。