如何让邮件表单使用独立JS文件实现无刷新提交？

问题背景 #

用JavaScript+PHP开发邮件收集表单，想要通过fetch实现无刷新提交，避免跳转到send_email.php页面。内嵌JS代码时能正常实现需求，但将JS放到独立文件中时，表单仍会跳转，需要解决这个问题。

问题根源 #

独立JS文件的代码执行时机早于DOM加载完成，导致getElementById('myForm')无法获取到表单元素，event.preventDefault()根本没生效，表单触发了默认的跳转提交行为。此外代码中还有几处细节错误，加剧了问题。

解决方案 #

1. 确保JS在DOM就绪后执行 #

把事件绑定逻辑放在DOMContentLoaded事件回调中，或者调整script标签的加载位置/属性，保证DOM元素加载完成后再执行JS代码。

2. 修正代码细节错误 #

• getElementsByName('message')返回的是NodeList，需指定具体元素索引才能操作
• PHP中存在拼写错误、未定义变量、缺少数据验证的问题

修正后的独立JS代码 #

document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('myForm');
  const messageDiv = document.getElementsByName('message')[0];
  const errorMessageDiv = document.getElementById('error-message');

  // 提前检查元素是否存在，避免后续代码报错
  if (!form || !messageDiv || !errorMessageDiv) {
    console.error('表单或提示元素未找到');
    return;
  }

  form.addEventListener('submit', (event) => {
    event.preventDefault(); 

    const formData = new FormData(form);

    fetch('send_email.php', {
      method: 'POST',
      body: formData
    })
    .then(response => {
      if (response.ok) {
        return response.text(); 
      } else {
        throw new Error('请求失败'); 
      }
    })
    .then(message => {
      messageDiv.textContent = message;
      messageDiv.style.display = 'block'; 
      form.reset(); 
    })
    .catch(error => {
      errorMessageDiv.textContent = '发送失败，请稍后重试';
      errorMessageDiv.style.display = 'block'; 
      console.error(error);
    });
  });
});

修正后的PHP代码 #

<?php
// 校验必填字段是否存在
if (!isset($_POST['email'], $_POST['username'], $_POST['subject'], $_POST['message'])) {
  echo '缺少必填字段';
  exit;
}

$to = 'info@website.com';
// 验证邮箱格式有效性
$from = filter_var($_POST['email'], FILTER_VALIDATE_EMAIL);
$name = htmlspecialchars($_POST['username']);
$subject = htmlspecialchars($_POST['subject']);
$message = htmlspecialchars($_POST['message']);

if (!$from) {
  echo '邮箱格式无效';
  exit;
}

// 规范邮件头格式，避免乱码
$headers = "From: $name <$from>\r\n";
$headers .= "Reply-To: $from\r\n";
$headers .= "Content-Type: text/plain; charset=UTF-8\r\n";

$body = "姓名: $name\n";
$body .= "邮箱: $from\n";
$body .= "主题: $subject\n";
$body .= "留言内容:\n$message";

if (mail($to, '网站新留言', $body, $headers)) {
  echo "留言发送成功！感谢您的反馈";
} else {
  echo "发送留言时出现错误，请稍后重试";
}
?>

HTML中正确引入JS的方式 #

方式一：将script标签放在body末尾

<body>
  <!-- 表单代码 -->
  <form id="myForm" method="POST">
    <input type="text" name="username" placeholder="姓名" required>
    <input type="email" name="email" placeholder="邮箱" required>
    <input type="text" name="subject" placeholder="主题" required>
    <textarea name="message" placeholder="留言内容" required></textarea>
    <button type="submit">提交</button>
  </form>

  <div name="message" style="display:none; color:green;"></div>
  <div id="error-message" style="display:none; color:red;"></div>

  <!-- 引入独立JS文件 -->
  <script src="form-submit.js"></script>
</body>

方式二：给script标签添加defer属性

<head>
  <script src="form-submit.js" defer></script>
</head>
<body>
  <!-- 表单代码 -->
</body>

核心原理 #

通过DOMContentLoaded事件或defer属性保证JS代码在DOM完全加载后执行，确保能正确获取表单元素并绑定submit事件；通过event.preventDefault()阻止表单默认跳转行为，再用fetch异步提交数据到PHP接口，最终实现无刷新提交效果。

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