使用event.preventDefault()后表单仍自动刷新，错误无法查看的问题

核心问题原因 #

你遇到的表单自动刷新、event.preventDefault()无效的问题，根源在于两处代码错误：

1. 初始代码的致命错误：
   let form = document.getElementById('form').submit(); 这行代码里，submit()方法执行后会直接触发表单提交（导致页面刷新），而且它的返回值是undefined，后续给form（实际是undefined）绑定submit事件监听完全无效。
2. 修正后代码的误区：
   手动调用document.getElementById('form').submit()时，浏览器不会触发submit事件，所以你绑定的event.preventDefault()根本没机会执行，表单自然还是会刷新。

正确解决方案 #

步骤1：绑定正确的submit事件监听

先获取表单元素，再绑定submit事件，在事件回调里阻止默认行为，然后处理localStorage存储逻辑：

<form id="form">
  <table>
    <tr>
      <td>Monday</td>
      <td><label for="Chest">Chest</label></td>
      <td class="checkboxContainer">
        <input type="checkbox" onclick="checkDay()" name="Monday" class="button">
      </td>
    </tr>
    <!-- 其他日期行省略 -->
    <tr>
      <td>Sunday</td>
      <td><label for="Rest">Rest</label></td>
      <td class="checkboxContainer">
        <input type="checkbox" onclick="checkDay()" name="Sunday" class="button">
      </td>
    </tr>
  </table>
  <!-- 添加提交按钮，明确触发入口 -->
  <button type="submit">保存计划</button>
</form>

<script>
  const form = document.getElementById('form');

  // 绑定submit事件监听
  form.addEventListener('submit', (event) => {
    // 阻止表单默认提交行为（避免页面刷新）
    event.preventDefault();

    // 处理表单数据存入localStorage的逻辑
    const formData = new FormData(form);
    // 转换为可存储的对象格式
    const planData = Object.fromEntries(formData);
    // 存入localStorage
    localStorage.setItem('workoutPlan', JSON.stringify(planData));

    console.log('数据已保存到localStorage');
  });
</script>

步骤2：如果需要手动触发提交（而非用户点击按钮）

不要直接调用form.submit()，而是通过触发submit事件来让监听逻辑生效：

// 手动触发submit事件（会触发监听里的preventDefault和存储逻辑）
const submitEvent = new Event('submit');
form.dispatchEvent(submitEvent);

额外提示 #

• 一闪而过的错误查看方法：打开浏览器开发者工具（F12），切换到「控制台」标签，勾选「保留日志」选项，页面刷新后错误信息就不会消失了。

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