时间戳

首页 > 解决方案 > 使用 smtpjs 在纯 javascript 中发送表单的值

javascript - 使用 smtpjs 在纯 javascript 中发送表单的值

问题描述

我正在尝试使用SmtpJS来捕获表单的值并将其发送到我的电子邮件。

到目前为止，我有以下表单标记：

<form>
  <input type="text" name="fullname" placeholder="Full Name" />
  
  <input type="text" name="idea" placeholder="Idea" />

  <div class="fruits">
  <input type="checkbox" id="apple" name="apple" value="apple">
  <label for="apple"> Apple</label><br>
   <input type="checkbox" id="orange" name="orange" value="orange">
  <label for="orange"> Orange</label><br>
  </div>

  <div class="gender">
  <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label><br>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label><br>
 </div>

 <input type="submit" value="submit" onclick={() => sendEmail() }/>
    
</form>

我了解要使用 smtpjs，您首先需要像这样包含它：

<script src="https://smtpjs.com/v3/smtp.js">
</script>

然后你需要一个函数来实际捕获和发送电子邮件，如下所示：

function sendEmail(){

    Email.send({
        Host : "smtp.yourisp.com",
        Username : "username",
        Password : "password",
        To : 'them@website.com',
        From : "you@isp.com",
        Subject : "This is the subject",
        Body : "And this is the body"
    }).then(
      message => alert(message)
    );
    
    }

如何捕获输入values、checked复选框和selected单选按钮值并将它们包含在将发送到我的电子邮件的电子邮件正文中？

标签： javascriptsmtpsmtpjs

解决方案

onClick我不会在 上使用属性，而是在 的事件button上使用事件侦听器。这个事件是元素本身，因此您可以使用该对象通过其属性访问表单上的属性。submitforme.targetformFormDataname

FormData您可以通过使用从事件处理程序创建一个对象const data = new FormData(e.target)，然后您可以访问诸如data.get("fullname"). 您还可以data.get()在Template Literal内部使用来创建文本，例如Welcome ${data.get("fullname")}.

function sendEmail(to, subject, body){
  console.log("Sending Email:");
  console.log("Subject:\n", subject);
  console.log("Body:\n", body);
    Email.send({
        Host : "smtp.yourisp.com",
        Username : "username",
        Password : "password",
        To : to,
        From : "you@isp.com",
        Subject : subject,
        Body : body
    }).then(
      message => console.log(message)
    ); 
}

const form = document.getElementById("myform");
form.addEventListener("submit", (e) => {
  e.preventDefault();
  const data = new FormData(e.target);
  const subject = `Welcome ${data.get("fullname")}`;
  const fruits = [data.get("apple"), data.get("orange")].filter(fruit => fruit !== null);
  const body = `Your idea ${data.get("idea")} has been submitted. Your selections are ${fruits.join(" ")} ${data.get("gender")}.`;
  sendEmail("them@website.com", subject, body);
});
<script src="https://smtpjs.com/v3/smtp.js"></script>
<body>
<form id="myform">
  <input type="text" name="fullname" placeholder="Full Name" />
  
  <input type="text" name="idea" placeholder="Idea" />

  <div class="fruits">
    <input type="checkbox" id="apple" name="apple" value="apple">
    <label for="apple"> Apple</label><br>
    <input type="checkbox" id="orange" name="orange" value="orange">
    <label for="orange">Orange</label><br>
  </div>

  <div class="gender">
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label><br>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label><br>
  </div>

 <input type="submit" value="submit"/>
    
</form>
</body>

推荐阅读