将点击事件改为submit后，联系表单无法发邮件且页面刷新问题

算力阿峰

2026-8-23

解决表单submit事件触发后页面刷新无法发送邮件的问题

你遇到的问题核心是事件绑定对象错误：submit事件属于<form>表单元素，而非提交按钮。之前给按钮绑定click事件能正常工作，是因为点击type="submit"按钮会触发表单默认提交行为，而你在click事件里用e.preventDefault()阻止了这个默认行为，从而执行自定义的fetch逻辑。但如果改成给按钮绑定submit事件，这个事件根本不会被触发，表单还是会执行默认的刷新提交，导致你的fetch代码没机会运行。

修复步骤：

给你的表单元素添加一个id（比如contactForm），然后获取表单元素而非按钮
将事件绑定到表单的submit事件上
确保e.preventDefault()放在事件处理函数最开头，优先阻止表单的默认提交行为

修改后的完整代码：

// 获取表单元素，而非提交按钮
const contactForm = document.getElementById("contactForm");
contactForm.addEventListener("submit", (e) => {
  // 先阻止表单默认提交，这一步必须前置
  e.preventDefault();

  // 获取表单输入值的逻辑保持不变
  let fullName = document.getElementById("name").value;
  let mail = document.getElementById("email").value;
  let subject = document.getElementById("subject").value;
  let message = document.getElementById("message").value;

  // 调用formsubmit.co接口的代码无需改动
  fetch("https://formsubmit.co/ajax/faa319d2539aa327d6bbbbd5b5ac10c3", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    body: JSON.stringify({
      Name: `${fullName}`,
      Mail: `${mail}`,
      Subject: `${subject}`,
      Message: `${message}`,
    }),
  })
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log(error));
});