使用JavaScript阻止表单提交后的页面跳转

直接调用form.submit()会触发浏览器默认的表单提交行为，必然会跳转到action指定的URL。要避免跳转，我们需要用异步方式提交表单——通过JavaScript发送AJAX请求，这样页面既不会刷新也不会跳转，还能灵活处理提交后的结果。

下面是具体的修改方案：

1. 先修复表单代码的小错误 #

你提供的表单代码里有个标签闭合问题，abrechnungszeitraum的隐藏input没写完，补上闭合的>：

document.getElementById("nonStaticField").innerHTML = ` 
<p style="font-size: 0.8em;">Als letzten Schritt bitte die Rechnung auswählen und hochladen</p> 
<form id="fullform" action="showRechnungsInput" method="POST" enctype="multipart/form-data"> 
  <input type="hidden" name="action" value="einreichen"> 
  <input type="hidden" name="rechnungsnummer" value="${sessionStorage.getItem("rechnungsnummer")}"> 
  <input type="hidden" name="abrechnungszeitraum" value="${sessionStorage.getItem("abrechnungszeitraum")}"> <!-- 补上闭合标签 -->
  <div class="upload-btn-wrapper"> 
    <input id="dateiupload" type="file" name="myfile" /> 
  </div> 
</form>`;

2. 重写submitForm函数，改用异步提交 #

把原来的submitForm函数替换成下面的代码，用FormData和fetch API异步发送表单数据（包括上传的文件）：

function submitForm() {
  // 获取表单元素
  const form = document.getElementById("fullform");
  // 自动包装表单内所有字段（包括文件）成FormData对象
  const formData = new FormData(form);

  // 异步发送请求，复用表单的action和method属性
  fetch(form.action, {
    method: form.method,
    body: formData
  })
  .then(response => {
    // 处理服务器响应
    if (response.ok) {
      console.log("文件上传成功！");
      // 这里可以添加成功后的操作，比如显示提示消息、重置表单等
    } else {
      console.error("上传失败，请检查服务器");
    }
  })
  .catch(error => {
    console.error("请求出错啦:", error);
  });

  // 返回false，彻底阻止任何可能的默认跳转行为
  return false;
}

3. 调整按钮的onclick属性 #

修改按钮的点击事件绑定，让它返回函数结果，进一步确保不会触发默认跳转：

document.getElementById("actionButton").setAttribute("onclick","return submitForm()");

这样修改后，点击按钮会悄悄把表单数据发送到目标地址，浏览器完全不会跳转，你还能在then回调里给用户展示上传成功/失败的提示，体验会更流畅。

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