无法发送 email 并且单击提交按钮时始终刷新

Question

Hello Developers/Programmers, I am having a problem resolving this issue since it's my first time creating my website. I want to send email from my website to my gmail and I used "submit" it's not working and it's always reloading upon clicking it.

Please bear with my codes I just copied some of my codes from different video tutorials and I don't understand some.

     //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"));
     }

Thank you for understanding my codes. If you know what goes wrong in my code why it's not working please tell me.

Answer 1

The main problem is the statement, which is preventing the form to be submitted ( you call this refreshing, but it is not. when your browser opens your page for the 1st time - it makes GET and after hitting the submit button - it makes POST )

1. document.querySelector(".submitButton").addEventListener("submit" is the event of the form - not of the submit button

2. you have not closed the statement properly, it should look like

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

Another problem is the construction of subject and body of your email, you should use this Template literals with ` character instead of "

Also, you should initialize the variable name with the value from the <input type= "text" class="name" by using var name = document.querySelector(".name").value;

So the corrected snippet looks like

<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"));
}