我正在尝试使用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单选按钮值，并将它们包含在将发送到我的电子邮件的正文中？
我将在form的submit事件上使用事件侦听器，而不是在button上使用onClick属性。此事件的e.target是form元素本身，因此您可以使用FormData对象通过其name属性访问表单上的属性。
您可以使用const data = new FormData(e.target)从事件处理程序创建一个FormData对象，然后可以访问类似data.get("fullname")的属性。您也可以在Template Literal中使用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>在脚本中，您可以包含以下
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:(";
}
}
显然，您需要在某个地方调用函数getCheckedValues()。
然后，对于Email.Send((的Body，您可以设置以下值(将firstname和idea的输入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;