0

I have put in the code to send me an email when the submit button has been pushed but it is not getting to EmailJS and I can't find the problem.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="Javascript/Index.js"></script> 
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script>
    <script type="text/javascript">
    (function() {
    emailjs.init("lw-rGAeNYwJp6Ox5R");
    })();
    </script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Squash Academy</title>
    <link rel="shortcut icon" href="Img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="Css/Stylesheet.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
    <nav class="nav">
        <div id="name">PNBHS Squash Academy</div>
        <ul id="buttons-nav">
            <li class ='navbutton' id="homebutton">Home</li>
            <li class ='navbutton' id="coachbutton">Coaching</li>
            <li class ='navbutton' id="registerbutton">Register</li>
            <li id="contactbutton">Contact<img id='contactimg'src="Img/Asset1.png" alt="triangle"></li>
            </div> 
        </ul>
        <div id="mySidebar" class="sidebar">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
            <a href="Index.html">Home</a>
            <a href="Coaching.html">Coaching</a>
            <a href="Register.html">Register</a>

      </div>
      <div id="mainish">
          <button class="openbtn" onclick="openNav()">☰</button>  
          </div>
    </nav>
    <main id="main">
        <body>
            <div class="grid-container-register">
                <div class="grid-item-register">
                    <h1>PNBHS</h1>
                    <h3>Squash Academy</h3>
                </div>
                <div class="grid-item-register">
                  <form class="form" id="myForm">
    
                    <div class="flex">
                        <label>
                            <input required="" placeholder="" type="text" class="input" id="first-name">
                            <span>first name</span>
                        </label>
                  
                        <label>
                            <input required="" placeholder="" type="text" class="input" id="last-name">
                            <span>last name</span>
                        </label>
                    </div>  
                            
                    <label>
                        <input required="" placeholder="" type="email" class="input" id="email">
                        <span>email</span>
                    </label> 
                        
                    <label>
                        <input required="" type="tel" placeholder="" class="input" id="contact-number">
                        <span>contact number</span>
                    </label>
                    <label>
                        <textarea required="" rows="3" placeholder="" class="input01" id="message"></textarea>
                        <span>Parent/Caregiver Infomation</span>
                    </label>
                    
                    <button class="fancy" href="">
                      <span class="top-key"></span>
                      <span class="text">submit</span>
                      <span class="bottom-key-1"></span>
                      <span class="bottom-key-2"></span>
                    </button> 
                </form></div>
            </div>
        </body>
    </main>
</body>
  
<!--<canvas id="myCanvas" width="900" height="500" style="border:1px solid transparent"></canvas>
-->



</body>
</html>

JavaScript:


// Listening for form submit event.
document.querySelector('#myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // Prevent the form from submitting normally.

  const firstNameEl = document.querySelector('#first-name');
  const lastNameEl = document.querySelector('#last-name');
  const emailEl = document.querySelector('#email');
  const contactNumberEl = document.querySelector('#contact-number');
  const messageEl = document.querySelector('#message');

  if (firstNameEl && lastNameEl && emailEl && contactNumberEl && messageEl) {
    // Destructuring form values to variables.
    const {value: firstName } = firstNameEl;
    const {value: lastName } = lastNameEl;
    const {value: email } = emailEl;
    const {value: contactNumber } = contactNumberEl;
    const {value: message } = messageEl;

    // EmailJS template parameters.
    const templateParams = { firstName, lastName, email, contactNumber, message };

    // Sending email with EmailJS.
    emailjs.send('service_b73vwu6', 'template_f65ay7i', templateParams)
      .then(response => console.log('SUCCESS!', response.status, response.text))
      .catch(error => console.error('FAILED...', error));
  }


});

CSS:

body{
    margin: 0;
}
/* Nav*/
.nav{
    width: 100%;
    height: 4.8vw;
    background-color: #0c4eab;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    display: inline-block;
}

#name{
    position: absolute;
    color: white;
    font-family: 'Raleway';
    font-size: 2.4vw;
    top: 0.8vw;
    left: 3vw;
    width: 35vw;
    margin: 0;
    padding: 0;
}

nav ul{
    list-style-type: none;
    margin: 0;
    margin-right: 0vw;
    padding: 0;
    float: right;
    width: 35vw;
}

nav li{
    display: inline-block;
    padding: 1.5vw;
    margin: 0;
    width: 5vw;
    text-align: center;
    color: white;
    height: 1.4vw;
    font-family: 'Raleway';
    position: relative;
}
.navbutton{
    border: #0c4eab solid;
    background-color: #0c4eab;
}
#contactbutton{
    background-color: #062857;
    border-radius: 50px;
    width: 6vw;
}

#contactimg{
    width: 10px;
    height: 10px;

}
/*End NAv*/
/*Side Bar*/
#mySidebar {
    height: 30vw;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    border-radius: 0, 20px,0,0;
  }
  .sidebar a{
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
  .sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  .openbtn {
    font-size: 20px;
    cursor: pointer;
    background-color: #111;
    color: white;
    padding: 10px 15px;
    border: none;
    position:fixed; top:1vw; right:1vw;
    
  }
  
  .openbtn:hover {
    background-color: #444;
  }
  #mainish {
    display: none;    
}
/*ENd Sidebar*/

/*Main*/
.main{
    background-color: #030821;
    height: 800px;
}
.grid-container-index{
    display: grid;
    grid-template-columns: 31vw 31vw 31vw; /* Two columns with equal width */
    grid-template-rows: auto auto auto; /* Three rows with automatic height */
    gap: 10px; /* Gap between grid items */
    background-color: #030821;
    height: 1000px;
    position: relative;
}

.grid-item-index {
    background-color: #030821; /* Background color for grid items */
    padding: 20px; /* Padding for grid items */
    color: white;
}

@media only screen and (max-width: 1200px) {
    nav ul{
        display: none;
    }
    #mainish {
        display: inline-block;
        
    }
}

.grid-container-register{
    display: grid;
    grid-template-columns: 31vw 31vw; /* Two columns with equal width */
    grid-template-rows: auto auto; /* Three rows with automatic height */
    gap: 10px; /* Gap between grid items */
    background-color: #030821;
    height: 1000px;
    position: relative;
}

.grid-item-register {
    background-color: #030821; /* Background color for grid items */
    padding: 20px; /* Padding for grid items */
    color: white;
}
/* Register*/
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 350px;
  background-color: #030821;
  padding: 20px;
  border-radius: 10px;
  position: relative;
}

.message {
  color: rgba(88, 87, 87, 0.822);
  font-size: 14px;
}

.flex {
  display: flex;
  width: 100%;
  gap: 6px;
}

.form label {
  position: relative;
  background-color: #030821;
}
.form input {
    color: #fff;
}
.form textarea {
    color: #fff;
}
.form label .input {
  width: 100%;
  padding: 10px 10px 20px 10px;
  outline: 0;
  border: 1px solid rgba(105, 105, 105, 0.397);
  border-radius: 5px;
  background-color: #030821 ;
}

.form label .input + span {
  position: absolute;
  left: 10px;
  top: 15px;
  color: #fff;
  font-size: 0.9em;
  cursor: text;
  transition: 0.3s ease;
}

.form label .input:placeholder-shown + span {
  top: 15px;
  font-size: 0.9em;
}

.form label .input:focus + span,.form label .input:valid + span {
  top: 30px;
  font-size: 0.7em;
  font-weight: 600;
}

.form label .input:valid + span {
  color: green;
}

.input01 {
  width: 100%;
  padding: 10px 10px 20px 10px;
  outline: 0;
  border: 1px solid rgba(105, 105, 105, 0.397);
  border-radius: 5px;
  background-color: #030821;

}

.form label .input01 + span {
  position: absolute;
  left: 10px;
  top: 50px;
  color: #fff;
  font-size: 0.9em;
  cursor: text;
  transition: 0.3s ease;
}

.form label .input01:placeholder-shown + span {
  top: 40px;
  font-size: 0.9em;
}

.form label .input01:focus + span,.form label .input01:valid + span {
  top: 50px;
  font-size: 0.7em;
  font-weight: 600;
}

.form label .input01:valid + span {
  color: green;
}

.fancy {
  background-color: transparent;
  border: 2px solid #cacaca;
  border-radius: 0px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-weight: 390;
  letter-spacing: 2px;
  margin: 0;
  outline: none;
  overflow: visible;
  padding: 8px 30px;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  transition: all 0.3s ease-in-out;
  user-select: none;
  font-size: 13px;
}

.fancy::before {
  content: " ";
  width: 1.7rem;
  height: 2px;
  background: #cacaca;
  top: 50%;
  left: 1.5em;
  position: absolute;
  transform: translateY(-50%);
  transform: translateX(230%);
  transform-origin: center;
  transition: background 0.3s linear, width 0.3s linear;
}

.fancy .text {
  font-size: 1.125em;
  line-height: 1.33333em;
  padding-left: 2em;
  display: block;
  text-align: left;
  transition: all 0.3s ease-in-out;
  text-transform: lowercase;
  text-decoration: none;
  color: #818181;
  transform: translateX(30%);
}

.fancy .top-key {
  height: 2px;
  width: 1.5625rem;
  top: -2px;
  left: 0.625rem;
  position: absolute;
  background: white;
  transition: width 0.5s ease-out, left 0.3s ease-out;
}

.fancy .bottom-key-1 {
  height: 2px;
  width: 1.5625rem;
  right: 1.875rem;
  bottom: -2px;
  position: absolute;
  background: white;
  transition: width 0.5s ease-out, right 0.3s ease-out;
}

.fancy .bottom-key-2 {
  height: 2px;
  width: 0.625rem;
  right: 0.625rem;
  bottom: -2px;
  position: absolute;
  background: white;
  transition: width 0.5s ease-out, right 0.3s ease-out;
}

.fancy:hover {
  color: white;
  background: #030821;
}

.fancy:hover::before {
  width: 1.5rem;
  background: white;
}

.fancy:hover .text {
  color: white;
  padding-left: 1.5em;
}

.fancy:hover .top-key {
  left: -2px;
  width: 0px;
}

.fancy:hover .bottom-key-1,
 .fancy:hover .bottom-key-2 {
  right: 0;
  width: 0;
}

I have changed the code a couple of times but I can't even tell what is the problem, I just know that it is not sending me emails when the submit button is hit.

Kevin M. Mansour
  • 2,915
  • 6
  • 18
  • 35
Heavyvibe
  • 5
  • 4

1 Answers1

0

The initial script call in the <head> of the file needs the defer or async tag.

Replace it with something like <script src="Javascript/Index.js" defer></script>

Without using defer or async, an Uncaught TypeError is thrown as document.querySelector() returns null when the parser stops while the browser requests the script file, as the HTML is not yet loaded and the <form> object has not been instantiated.

While defer or async are not the only fixes, they are the most modern.

There are many different approaches to this problem, and a much more in-depth explanation is provided here which should hopefully assist you in choosing the best method should you check it out.

Vindicated
  • 36
  • 5