表单提交后无法跳转至新页面的问题排查与解决求助

嘿，我一眼就看到你代码里的核心问题了——e.preventDefault没有调用！ 它是个方法，必须加上括号写成e.preventDefault()才会生效，不然浏览器还是会执行表单的默认提交行为，这会直接覆盖你写的window.location.href跳转逻辑。

第一步：修正阻止默认行为的代码 #

把你的事件处理函数改成这样：

form.addEventListener("submit", function (e) {
  // 这里要加括号调用方法！
  e.preventDefault(); 
  console.log("sasadas");
  const mal = { 
    "omkrets": form.omkrets.value, 
    "areal": form.areal.value, 
    "hoyde": form.hoyde.value 
  };
  document.cookie = 'mal=' + JSON.stringify(mal) + ";domain=;path=/";
  window.location.href = "http://127.0.0.1:8000/kategori/"; 
});

其他排查方向（如果修正后还是不行） #

• 检查控制台报错：打开浏览器开发者工具的控制台，看看有没有变量未定义、元素找不到之类的错误——如果前面的代码抛出异常，后面的跳转代码就不会执行。比如确认form变量是不是正确获取到了表单DOM元素，form.omkrets这些表单控件是否存在。
• 验证Cookie设置合法性：有些浏览器对空domain的Cookie设置有严格限制，你可以暂时去掉domain=;试试，改成document.cookie = 'mal=' + JSON.stringify(mal) + ";path=/";，避免Cookie设置失败导致代码中断。
• 尝试替换跳转方式：如果window.location.href还是不生效，可以试试location.replace("http://127.0.0.1:8000/kategori/")，这个方法会替换当前页面的历史记录，有时候能绕过一些默认行为的干扰。
• 检查表单的action属性：如果你的HTML表单里设置了action属性，即使阻止了默认行为，也要确保没有其他代码触发了表单提交，或者确认preventDefault()确实在所有可能的路径都被执行到了。

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