大佬教程收集整理的这篇文章主要介绍了使用 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="@R_419_5555@" value="@R_419_5555@" 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
单选按钮值并将它们包含在将发送到我的电子邮件的电子邮件正文中?
在脚本中,您可以包含以下内容
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() 的正文,您可以设置以下值(将 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;
,
我不会在 onClick
上使用 button
属性,而是在 submit
的 form
事件上使用事件侦听器。此事件的 e.target
是 form
元素本身,因此您可以使用 FormData
对象通过 name
属性访问表单上的属性。
您可以使用 FormData
从您的事件处理程序创建一个 const data = new FormData(e.target)
对象,然后您可以访问 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",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>
以上是大佬教程为你收集整理的使用 smtpjs 在纯 javascript 中发送表单的值全部内容,希望文章能够帮你解决使用 smtpjs 在纯 javascript 中发送表单的值所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。