無法發送 email 並且單擊提交按鈕時始終刷新

Question

你好開發人員/程序員，我在解決這個問題時遇到了問題，因為這是我第一次創建我的網站。 我想將 email 從我的網站發送到我的 gmail 並且我使用“提交”它不起作用並且它總是在單擊它時重新加載。

請忍受我的代碼我只是從不同的視頻教程中復制了一些代碼，我不明白一些。

     //index.html

    <script src="https://smtpjs.com/v3/smtp.js"></script>
    <script src="app.js"></script>

    <div class= "contactMe">
    <form action="" method="post">
    <h2>Send Message</h2>
    <div class = "inputBox">
    <input type= "text" class="name" name="" required= "required" placeholder="Full Name">
    </div>
 
    <div class = "inputBox">
    <input type= "text" class="email" name="" required= "required" placeholder="Your Email">
    </div>
 
    <div class = "inputBox">
    <textarea placeholder="Your message here..." class="message" required= "required"></textarea>
    </div>
 
    <div class = "inputBox">
    <input type = "submit" class="submitButton" name="" value="Send" onclick="sendEmail()">
    </div>

    </form>
    </div>

    //style.css

    .contactMe{
    position:absolute;
    bottom:20%;
    left:10%;
    width: 50%;

    display:none;


    }
    .contactMe h2{
        font-size: 30px;
        color: white;
        font-weight: 500;
        margin:20px;

      }

     }

    .contactMe .inputBox{
    position: relative;
    width: 10%;
    /*margin-top: 10px;*/
    border: 3px solid black;

    }
     .contactMe .inputBox input , textarea{

      width: 50%;
      padding: 5px 0;
      font-size: 16px;
      margin:  10px 0;
      background-color: rgba(0,0,0,0.7);
      color: white;
      border: none;
      border-bottom: 2px solid #333;
      outline: none;
      resize: none;
     }
         .contactMe .inputBox textarea{
         height: 135px;

     }
     .contactMe .inputBox input[type="submit"]{
     width: 100px;
     background: white;
     color: black;
     cursor: pointer;
     padding: 10px;
     font-size: 18px;
     }

    //app.js

    document.querySelector(".submitButton").addEventListener("submit", 
     function(e){
       e.preventDefault();
     }

     function sendEmail() {
       Email.send({
         Host : "smtp.gmail.com",
         Username : "myemail@gmail.com",
         Password : "Mypassword",
         To : 'myemail@gmail.com',
         From : "myemail@gmail.com",
         Subject : $name + "sent you a message",
         Body : "Name:" + $name <br/> "Email:"  <br/> "Message:",
        }
      ).then(message => alert("Message successfully sent"));
     }

感謝您理解我的代碼。 如果您知道我的代碼出了什么問題，為什么它不起作用，請告訴我。

Answer 1

主要問題是阻止提交表單的語句（您稱之為刷新，但事實並非如此。當您的瀏覽器第一次打開您的頁面時 - 它會生成GET並在點擊提交按鈕后 - 它會生成POST )

1. document.querySelector(".submitButton").addEventListener("submit"是表單的事件——不是提交按鈕的事件

2. 你沒有正確關閉語句，它應該看起來像

document.querySelector(".emailForm").addEventListener("submit", function(e){ e.preventDefault(); });

另一個問題是您的email的主題和正文的構造，您應該使用帶有 ` 字符而不是 "

此外，您應該使用var name = document.querySelector(".name").value;使用<input type= "text" class="name"中的值初始化變量名稱。

所以更正的片段看起來像

<form action="" method="post" class="emailForm">
...
document.querySelector(".emailForm").addEventListener("submit", function(e){
   e.preventDefault();
});

function sendEmail() {
   var name = document.querySelector(".name").value;

   Email.send({
     Host : "smtp.gmail.com",
     Username : "myemail@gmail.com",
     Password : "Mypassword",
     To : 'myemail@gmail.com',
     From : "myemail@gmail.com",
     Subject : `${name} sent you a message`,
     Body : `Name: ${name} <br/> Email:  <br/> Message:`,}).then(message => alert("Message successfully sent"));
}