jquery - Page changes to .php from my .html on Ajax call

Question

The Problem

When I use my PHP function to send email, everything works great. However, I don't want the page to refresh, so I am using ajax in the following manner:

reservation.html

    <form class="form-horizontal"
      method="post" 
      action="mailer.php"
      id="submitForm">

    <div class="form-group">
        <label for="name" class="cols-sm-2 control-label">Your Name</label>
        <div class="cols-sm-10">
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                <input type="text" class="form-control" name="name" id="userName"  placeholder="Enter your Name"/>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="email" class="cols-sm-2 control-label">Your Email</label>
        <div class="cols-sm-10">
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
                <input type="text" class="form-control" name="email" id="userEmail"  placeholder="Enter your Email"/>
            </div>
        </div>
    </div>

    <hr style="border-color:black;">

    <div class="form-group ">
        <button id="sendEmailButton"
                type="submit" 
                class="btn btn-primary btn-lg btn-block login-button"
                style="background-color:#483D8B;border-color:none;">Register</button>
    </div>
</form>


<script type="text/javascript">

    $(document).ready(function(){

        $('#submitForm').submit(function(e){

            e.preventDefault(); // Prevent Default Submission

            $.ajax({
                url: 'mailer.php',
                type: 'POST',
                data: $(this).serialize(), // it will serialize the form data
                dataType: 'html'
                })
            .done(function(data){
             $('#submitForm').fadeOut('slow', function(){ 
                  $('#submitForm').fadeIn('slow').html(data);
                });
            })
            .fail(function(){
                 alert('Ajax Submit Failed ...'); 
            });
            e.preventDefault(); 
        });
   });

});
</script>

mailer.php

<?php

    $theName = $_POST["name"];
    $theEmail = $_POST["email"];
    $to = $theEmail;
    $subject = "Hi, ". $theName."!";
    $txt = "All the details ... ";
    $headers = "From: yay@blakes.graduation.com" . "\r\n";

    //mail($to,$subject,$txt,$headers);
?>  

The Diagnosis

So when I hit the submit button, the page changes from www.bmconrad.webutu.com/html/reservation.html to www.bmconrad.webutu.com/html/mailer.php . I have left the site up running in this state for anyone who can take a look and help me understanding what I am missing or what's the best way of doing this. Thanks for any/all input.

Answer 1

Its because you have an error in your javascript code. When you have error in your js code preventDefault() fails, and form behaves standard way and redirects to action method.

Just remove last extra }); should work.