使用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