使用smtpjs发送纯javascript形式的值
[英]Using smtpjs to send the value of the form in pure javascript
问题描述
I am trying to use SmtpJS to capture the value of my form and send it to my email.
我正在尝试使用SmtpJS来捕获我的表单的值并将其发送到我的 email。
So far I have the following form markup:到目前为止，我有以下表单标记：
<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>
I understand in order to use smtpjs, you first need to include it like this:我知道为了使用 smtpjs，你首先需要像这样包含它：
<script src="https://smtpjs.com/v3/smtp.js">
</script>
And then you need a function that will actually capture and send the email like this:然后你需要一个 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)
);
}
How do I capture the inputs values , checked checkbox and selected radio buttons values and include them on the body of my email that will send to my email?如何捕获输入values 、 checked的复选框和selected的单选按钮值，并将它们包含在将发送到我的 email 的 email 的正文中？
2 个解决方案
解决方案1
1 2021-04-21 22:14:24
Instead of using an onClick attribute on the button , I would use an event listener on the submit event of the form .我不会在button上使用onClick属性，而是在form的submit事件上使用事件侦听器。 The e.target for this event is the form element itself so you can make use of theFormData object to access properties on your form by their name property.此事件的e.target是form元素本身，因此您可以使用FormData object 通过name属性访问表单上的属性。
You can create a FormData object from your event handler by using const data = new FormData(e.target) and then you can access properties like data.get("fullname") .您可以使用const data = new FormData(e.target)从事件处理程序创建FormData object，然后您可以访问data.get("fullname")等属性。 You can also use data.get() inside of a Template Literal to create texts like Welcome ${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>
解决方案2
0 2021-04-21 21:09:07
In the script, you can include the following在脚本中，您可以包含以下内容
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:(";
}
}
Obviously, you will need to call the function getCheckedValues() somewhere.显然，您需要在某处调用 function getCheckedValues getCheckedValues() 。
Then, for the Body of your Email.Send(), you could set the following value (give ids of inputs for firstname and idea as id="firstname" and id="idea":然后，对于 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;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.