jquery - Seite Änderungen an .php von meinem .html auf Ajax

Question

nennen

Das Problem

Wenn ich meine PHP-Funktion verwenden, E-Mail zu senden, funktioniert alles super. Aber ich möchte nicht, die Seite zu aktualisieren, so dass ich Ajax in der folgenden Art und Weise bin mit:

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); 
?> 

Die Diagnose

Also, wenn Ich drücke den Submit-Button, die Seite wechselt von www.bmconrad.webutu.com/html/reservation.html zu www.bmconrad.webutu.com/html/mailer.php. Ich habe die Seite in diesem Zustand für jemanden laufen lassen, der einen Blick darauf werfen kann und mir hilft zu verstehen, was ich vermisse oder was der beste Weg ist, dies zu tun. Danke für alle/alle Eingaben.

Answer 1

Es ist, weil Sie einen Fehler in Ihrem JavaScript-Code haben. Wenn Sie einen Fehler in Ihrem JS-Code haben, schlägt preventDefault() fehl, und das Formular verhält sich standardmäßig und leitet zur Aktionsmethode um.

Entfernen Sie nur letzte Extra }); sollte funktionieren.