使用smtpjs发送纯javascript形式的值

Question

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

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

<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，它会像这样捕获并发送 email：

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的单选按钮值，并将它们包含在将发送到我的 email 的 email 的正文中？

Answer 1

我不会在button上使用onClick属性，而是在form的submit事件上使用事件侦听器。 此事件的e.target是form元素本身，因此您可以使用FormData object 通过name属性访问表单上的属性。

您可以使用const data = new FormData(e.target)从事件处理程序创建FormData object，然后您可以访问data.get("fullname")等属性。 您还可以在模板文字中使用data.get()来创建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>

Answer 2

在脚本中，您可以包含以下内容

var apple_checked;
var orange_checked;
var male_checked;
var female_checked;

function getCheckedValues(){
if (document.getElementById('apple').checked) {
            apple_checked="isChecked!";
        }else{
apple_checked="notChecked:(";
}

if (document.getElementById('orange').checked) {
            orange_checked="isChecked!";
        }else{
orange_checked="notChecked:(";
}

if (document.getElementById('male').checked){
male_checked="isChecked!";
}else{
male_checked="notChecked:(";
}

if (document.getElementById('female').checked){
female_checked="isChecked!";
}else{
female_checked="notChecked:(";
}

}

显然，您需要在某处调用 function getCheckedValues getCheckedValues() 。

然后，对于 Email.Send() 的主体，您可以设置以下值（将名字和想法的输入 ID 指定为 id="firstname" 和 id="idea"：

Body : "First Name: "+document.getElementById('firstname').value+" Idea: "+document.getElementById('idea').value+"apple: "+apple_checked+" orange:"+orange_checked+" male: "+male_checked+" female: "+female_checked;

使用smtpjs发送纯javascript形式的值

问题描述

2 个解决方案

解决方案1
1 2021-04-21 22:14:24

解决方案2
0 2021-04-21 21:09:07

使用smtpjs发送纯javascript形式的值

问题描述

2 个解决方案

解决方案1 1 2021-04-21 22:14:24

解决方案2 0 2021-04-21 21:09:07

解决方案1
1 2021-04-21 22:14:24

解决方案2
0 2021-04-21 21:09:07