title: Stop page refresh after form submit
body: <p>I have searched many other threads about this and I can't see what I am doing wrong, I am trying to send form values to a php file to send as an email, however the pages always refreshes. I have tried using event.preventDefault and return false both before and after my ajax call but none seem to work. What am I missing here here is my code.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form method="post" name="registerForm" class="form"&gt;
      &lt;label for="fullName" class="form__fullname form__label"&gt;Full Name&lt;/label&gt;
  
      &lt;input type="text" name="fullName" placeholder="Richard Thomson" maxlength="40" tabindex="1" pattern="^[a-zA-Z\s]*$" class="form__input" id="name" required&gt;
  
      &lt;label for="email" class="form__email form__label"&gt;Email&lt;/label&gt;
  
      &lt;input type="email" name="email"  placeholder="richard.thomson45@gmail.com" tabindex="2" class="form__input" id="email" required&gt;
  
      &lt;label for="telephone" class="form__tel form__label"&gt;Phone&lt;/label&gt;
  
      &lt;input type="tel" name="telephone" placeholder="07915834998" tabindex="3" pattern="[0-9]{11}" maxlength="11" class="form__input" id="telephone" required&gt;
  
      &lt;input type="submit" value="Submit" name="submit" class="form__submit" id="submit"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var fullName,
      telephone,
      email,
      submitButton = $("#submit"),        
      formData;
  
  submitButton.submit(function (event) {
      // event.preventDefault();
  
      fullName = $("#name").val();
      telephone = $("#telephone").val();
      email = $("#email").val();
      formData = {
          'name': fullName,
          'email': email,
          'telephone': telephone
      };
  
      $.ajax({
              type: 'POST',
              url: 'email.php',
              data: formData,
              dataType: 'json'
          })
          .done(function (data) {
              console.log(data);
          })
          .fail(function () {
              console.log("not working");
          });
  
      return false;
  });
  </code></pre>
  
  <p>PHP</p>
  
  <pre><code>&lt;?php
      if($_SERVER['REQUEST_METHOD'] == 'POST') {
          if (isset($_POST['name']) &amp;&amp; isset($_POST['email']) &amp;&amp; isset($_POST['telephone'])) {
  
              if (filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
                  $email = $_POST['email'];
              }
  
              if (preg_match("/^[a-zA-Z\s]*$/", $_POST['fullName'])) {
                  $fullName = $_POST['fullName'];
              }
  
              if (preg_match("/[0-9]{11}/", $_POST['telephone'])) {
                  $telephone = $_POST['telephone'];
              }
  
              $telephone = substr_replace(substr_replace($telephone," ",3,0)," ",8,0);
  
              $emailTo = "test@hotmail.co.uk";
              $emailFrom = "contact@test.co.uk";
              $subject = "I would like to know more about test";
              $message = "Name:" . " " . $fullName . "\r\n\r\n";
              $message .= "Email:" . " " . $email . "\r\n\r\n";
              $message .= "Telephone:" . " " . $telephone;
  
              $headers = "From: $emailFrom \r\n";
              $headers .= 'Content-Type: text/plain; charset=utf-8'; 
              $headers .= "Reply-To: $email \r\n";
  
              $success = mail($emailTo, $subject, $message, $headers);
  
          } else {
              echo("Please fill all necessary fields");
          }
      }
  ?&gt;
  </code></pre>