使用EmailJS从表单输入发送邮件失败问题求助

测试项目中使用EmailJS发送邮件一切正常，但移植到主站点后出现错误。错误出在从表单输入框获取数据的环节——如果在JS代码中给参数设置固定默认值，就能成功发送邮件。

相关代码如下：

SendMail.js #

function SendMail() {
var params = {
    name : document.getElementById("name").value,
    email : document.getElementById("email").value,
    message : document.getElementById("message").value,
    subject : document.getElementById("subject").value
}

emailjs.send('service_c3uu59k', 'template_j55tgxr', params)
.then(function(response) {
    console.log('SUCCESS!', response.status, response.text);
    alert("Dziala");
 }, function(error) {
    console.log('FAILED...', error);
    alert("Nie dziala");
 });
}

HTML表单代码 #

<form method="POST">
  <div class="row">
    <div class="col-md-6">
      <div class="md-form">
        <input class="form-control" id="name" type="text" name="name" required="required"/>
        <label for="name">Name</label>
      </div>
    </div>
    <div class="col-md-6">
      <div class="md-form">
        <input class="form-control" id="email" type="text" name="email" required="required"/>
        <label for="email">Email</label>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="md-form">
        <input class="form-control" id="subject" type="text" name="subject" required="required"/>
        <label for="subject">Subject</label>
      </div>
    </div>
    <div class="col-md-12">
      <div class="md-form">
        <textarea class="md-textarea" id="message" name="message" required="required"></textarea>
        <label for="message">Message</label>
      </div>
    </div>
  </div>
  <div class="center-on-small-only mb-4">
    <button class="btn btn-indigo ml-0" onclick="SendMail()"><i class="fa fa-paper-plane-o mr-2"></i> Wyślij</button>
  </div>
</form>

根据问题症状，核心是表单数据获取失败，以下是针对性的排查和修复方案：

1. 阻止表单默认提交行为 #

按钮位于<form>标签内，默认点击会触发表单提交，导致页面刷新——此时JS可能还未完成数据获取和邮件发送就被中断。

修复方式：

• 给按钮添加type="button"属性，避免触发表单提交：

<button type="button" class="btn btn-indigo ml-0" onclick="SendMail()"><i class="fa fa-paper-plane-o mr-2"></i> Wyślij</button>

• 或者在SendMail函数中手动阻止默认行为：

function SendMail(event) {
  event.preventDefault(); // 阻止表单提交刷新
  var params = {
    name : document.getElementById("name").value,
    email : document.getElementById("email").value,
    message : document.getElementById("message").value,
    subject : document.getElementById("subject").value
  }
  // 后续发送逻辑不变
}

同时修改按钮的onclick传参：

<button class="btn btn-indigo ml-0" onclick="SendMail(event)"><i class="fa fa-paper-plane-o mr-2"></i> Wyślij</button>

2. 确保DOM元素正确获取 #

主站点可能存在以下情况导致元素获取失败：

• 页面中有多个相同id的元素，导致getElementById拿到错误的元素；
• JS代码在DOM加载完成前执行，此时元素还未渲染。

修复方式：

• 检查主站点页面，确保name、email、subject、message这几个ID唯一；
• 将JS代码放在页面底部（</body>标签前），或者用DOMContentLoaded事件包裹，确保DOM加载完成后再执行：

document.addEventListener('DOMContentLoaded', function() {
  window.SendMail = function() {
    // 原函数逻辑
  }
});

3. 验证EmailJS初始化 #

虽然设置默认值能发送，但仍需确认主站点中EmailJS的SDK是否正确加载，以及service_c3uu59k、template_j55tgxr这两个ID是否和测试项目一致。

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