JavaScript多目标表单提交弹出about:blank空白页的解决方法

多余空白页由两个问题共同导致：

• 所用<button>未显式声明type="button"，浏览器默认将无type属性的按钮识别为提交按钮，即使按钮放在form标签外部，部分浏览器仍会关联页面首个表单触发默认提交，该次提交无有效目标地址时就会打开about:blank空白页。
• 逻辑中复用同一个DOM表单实例连续调用submit()方法，浏览器对同一表单的短时间多次提交存在上下文冲突：第一次提交创建新标签页后，后续提交会因表单上下文被前一次提交占用，异常生成空白标签页。

核心思路是放弃复用原表单多次提交，为每个选中的目标生成独立的临时表单完成提交，同时阻断按钮的默认提交行为，从根源避免冲突。

修正后的HTML代码 #

<form class="search_content" action="/" method="post" id="form1" name="form1">
  <input type="text" id="lname" name="lname" required>
  <!-- 直接将目标地址存在复选框value中，简化后续逻辑 -->
  <input type="checkbox" id="myCheck" value="https://www.example.com/action_page.php">
  <input type="checkbox" id="myCheck1" value="https://www.example1.com/action_page.php">
  <input type="checkbox" id="myCheck2" value="https://www.example2.com/action_page.php">
</form>

<!-- 必须添加type="button" 阻断默认提交行为 -->
<button type="button" onclick="submitForms()">
  Go Search !
</button>

修正后的JavaScript代码 #

function submitForms() {
  const sourceForm = document.getElementById("form1");
  // 触发表单原生必填校验
  if (!sourceForm.checkValidity()) {
    sourceForm.reportValidity();
    return;
  }

  // 收集所有已勾选的目标地址
  const checkedTargets = document.querySelectorAll('#form1 input[type="checkbox"]:checked');
  if (checkedTargets.length === 0) {
    alert('请至少选择一个搜索目标');
    return;
  }

  // 为每个目标创建独立临时表单提交
  checkedTargets.forEach(target => {
    const tempForm = document.createElement('form');
    tempForm.method = 'post';
    tempForm.action = target.value;
    tempForm.target = '_blank';
    tempForm.style.display = 'none';

    // 自动复制原表单所有字段值到临时表单
    const formData = new FormData(sourceForm);
    formData.forEach((value, key) => {
      const hiddenInput = document.createElement('input');
      hiddenInput.type = 'hidden';
      hiddenInput.name = key;
      hiddenInput.value = value;
      tempForm.appendChild(hiddenInput);
    });

    // 插入DOM、提交、完成后移除临时表单
    document.body.appendChild(tempForm);
    tempForm.submit();
    document.body.removeChild(tempForm);
  });
}

• 彻底解决空白页问题：每个提交动作使用独立表单实例，无上下文冲突，按钮默认提交行为被完全阻断。
• 可维护性强：后续新增搜索目标只需要加对应复选框、把目标地址存在value属性即可，不需要修改JS逻辑。
• 自带基础校验：输入框为空、未选任何目标时会给出提示，不会产生无效提交。
• 不会被浏览器弹窗拦截：所有提交动作都是用户点击按钮直接触发的同步请求，符合浏览器安全策略。

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