Ich kann keine E-Mail über Ajax senden

Question

Ich brauche Hilfe, um zu finden, welchen Fehler ich mache, weil ich versuche, eine Funktion zu entwickeln, die E-Mail aus einem HTML-Formular mit PHP und AJAX senden, das Problem, das ich an stelle wann immer ich klicken sie anschließend auf bouton die Seite erfrischend ist, in der Regel, wie wir in der JavaScript-Skript sehen können, soll ich eine Nachricht empfangen, dass es zeigt, erfolgreich

mit freundlichen Grüßen,

PHP Datei

senden wurde:

<?php 
if (isset($_REQUEST['email'])) { 
    //Email information 
    $admin_email = "basselbizri@gmail.com"; 
    $name = $_REQUEST['first_name']; 
    $email = $_REQUEST['email']; 
    $message = $_REQUEST['message']; 

    //send email 
    if (mail($admin_email, $name, $message, "From:" . $email)) { 
     echo 1; 
    } 
    else { 
     echo 0; 
    } 
} 
?> 

HTML-Formular:

Script

<form class="inline" id="contactForm" method="post" > 
    <div class="row"> 
     <div class="col-sm-6 height-contact-element"> 
      <div class="form-group"> 
       <input type="text" name="first_name" class="form-control custom-labels" id="name" placeholder="FULL NAME" required data-validation-required-message="Please write your name!"/> 
       <p class="help-block text-danger"></p> 
      </div> 
     </div> 
     <div class="col-sm-6 height-contact-element"> 
      <div class="form-group"> 
       <input type="email" name="email" class="form-control custom-labels" id="email" placeholder="EMAIL" required data-validation-required-message="Please write your email!"/> 
       <p class="help-block text-danger"></p> 
      </div> 
     </div> 
     <div class="col-sm-12 height-contact-element"> 
      <div class="form-group"> 
       <input type="text" name="message" class="form-control custom-labels" id="message" placeholder="WHAT'S ON YOUR MIND" required data-validation-required-message="Please write a message!"/> 
      </div> 
     </div> 
     <div class="col-sm-3 col-xs-6 height-contact-element"> 
      <div class="form-group"> 
       <input type="submit" class="btn btn-md btn-custom btn-noborder-radius" value="Send It"/> 
      </div> 
     </div> 
     <div class="col-sm-3 col-xs-6 height-contact-element"> 
      <div class="form-group"> 
       <button type="button" class="btn btn-md btn-noborder-radius btn-custom" name="reset">RESET 
       </button> 
      </div> 
     </div> 
     <div class="col-sm-3 col-xs-6 height-contact-element"> 
      <div class="form-group"> 
       <div id="response_holder"></div> 
      </div> 
     </div> 
     <div class="col-sm-12 contact-msg"> 
     <div id="success"></div> 
     </div> 
    </div> 
</form> 

JS:

$('#contactForm').on('submit', function(e){ 
      e.preventDefault(); 
      e.stopPropagation(); 

      // get values from FORM 
      var name = $("#name").val(); 
      var email = $("#email").val(); 
      var message = $("#message").val(); 
      var goodToGo = false; 
      var messgaeError = 'Request can not be send'; 
      var pattern = new RegExp(/^(('[\w-\s]+')|([\w-]+(?:\.[\w-]+)*)|('[\w-\s]+')([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i); 


      if (name && name.length > 0 && $.trim(name) !='' && message && message.length > 0 && $.trim(message) !='' && email && email.length > 0 && $.trim(email) !='') { 
        if (pattern.test(email)) { 
        goodToGo = true; 
        } else { 
        messgaeError = 'Please check your email address'; 
        goodToGo = false; 
        } 
      } else { 
       messgaeError = 'You must fill all the form fields to proceed!'; 
       goodToGo = false; 
      } 


      if (goodToGo) { 
       $.ajax({ 
       data: $('#contactForm').serialize(), 
       beforeSend: function() { 
        $('#success').html('<div class="col-md-12 text-center"><img src="images/spinner1.gif" alt="spinner" /></div>'); 
       }, 
       success:function(response){ 
        if (response==1) { 
        $('#success').html('<div class="col-md-12 text-center">Your email was sent successfully</div>'); 
        window.location.reload(); 
        } else { 
        $('#success').html('<div class="col-md-12 text-center">E-mail was not sent. Please try again!</div>'); 
        } 
       }, 
       error:function(e){ 
        $('#success').html('<div class="col-md-12 text-center">We could not fetch the data from the server. Please try again!</div>'); 
       }, 
       complete: function(done){ 
        console.log('Finished'); 
       }, 
       type: 'POST', 
       url: 'js/send_email.php', 
       }); 
       return true; 
      } else { 
       $('#success').html('<div class="col-md-12 text-center">'+messgaeError+'</div>'); 
       return false; 
      } 
      return false; 
     }); 
    }); 

Answer 1

In Ihrem success() Methode sind Sie reload() ‚ing die Seite. So

if (response==1) { 
    $('#success').html('<div class="col-md-12 text-center">Your email was sent successfully</div>'); 
    window.location.reload(); // <----- remove this; it's causing the page to reload 
} 

wenn Ihre mail() Funktion löst true, in der PHP-Datei (send_email.php), sind Sie 1 auf Ihre AJAX Antwort zurückgibt, die die if (response == 1) ist erlaubt gerecht zu werden, und dann bist du window.location.reload() mit der neu zu laden Seite. Durch das Entfernen von window.location.reload(); wird die Seite nicht neu geladen.