Форма подтверждена, но никакая электронная почта не отправляет

Question

есть некоторые проблемы с моей формой, которая проверяется правильно, но при нажатии кнопки отправки ничего не выходит по электронной почте. Функция Mail fucntion включена на сервере, так как я проверил отправку сырой почты. Что здесь может быть не так? Смотрите мой код ниже

HTML и JS:

.... 

    <!-- Bootstrap Css --> 
    <link href="bootstrap-assets/css/bootstrap.min.css" rel="stylesheet"> 

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script> 
    <script type="text/javascript" src="js/validator.min.js"></script> 

    <!-- Style --> 
    <link href="plugins/owl-carousel/owl.carousel.css" rel="stylesheet"> 
    <link href="plugins/owl-carousel/owl.theme.css" rel="stylesheet"> 
    <link href="plugins/owl-carousel/owl.transitions.css" rel="stylesheet"> 
    <link href="plugins/Lightbox/dist/css/lightbox.css" rel="stylesheet"> 
    <link href="plugins/Icons/et-line-font/style.css" rel="stylesheet"> 
    <link href="plugins/animate.css/animate.css" rel="stylesheet"> 
    <link href="css/main.css" rel="stylesheet"> 
    <!-- Icons Font --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 



<script> 

$(document).ready(function() { 
$("#contactForm").validator().on("submit", function (event) { 
    if (event.isDefaultPrevented()) { 
     // handle the invalid form... 
      console.log("rrrr"); 
    } else { 
     console.log("fff"); 
     // everything looks good! 
     event.preventDefault(); 
     submitForm(); 
    } 
}); 
}); 

$(document).ready(function submitForm() { 
    // Initiate Variables With Form Content 
    var name = $("#name").val(); 
    var email = $("#email").val(); 
    var message = $("#message").val(); 

    $.ajax({ 
     type: "POST", 
     url: "process.php", 
     data: "name=" + name + "&email=" + email + "&message=" + message, 
     success : function(text){ 

      if (text == "success"){ 
       formSuccess(); 
      } 
     } 
    }); 
}); 

$(document).ready(function formSuccess() { 
    $("#msgSubmit").removeClass("hidden"); 
}); 


</script> 

форма контакта:

<form role="form" id="contactForm"> 
    <div class="row"> 
      <div class="form-group"> 
       <input type="text" class="form-control" name="name" id="name" placeholder="Wpisz swoje imię, nazwisko" required="required"> 
      </div> 
      <div class="form-group"> 
       <input type="email" class="form-control" name="email" id="email" placeholder="Enter email" required> 
      </div> 

     <div class="form-group"> 
      <textarea id="message" name="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea> 
     </div> 
     <button type="submit" id="form-submit" class="btn-block">Wyślij wiadomość</button> 
<div id="msgSubmit" class="h3 text-center hidden">Message Submitted!</div> 
    </div> 
    </form> 

procrss.php:

<?php 
$name = $_POST["name"]; 
$email = $_POST["email"]; 
$message = $_POST["message"]; 

$EmailTo = "george@hgtg.com"; 
$Subject = "New Message Received"; 

// send email 
$success = mail($EmailTo, $Subject, $message, $email); 

// redirect to success page 
if ($success){ 
    echo "success"; 
}else{ 
    echo "invalid"; 
} 
?> 

Answer 1

Вторая функция не то, что вы, кажется, подумайте, что это просто обработчик DOM, который вы дали, и вы увидите ошибку на консоли, сообщающую вам, что submitForm() не определен.

Изменить это просто

function submitForm() { 
    // Initiate Variables With Form Content 
    var name = $("#name").val(); 
    var email = $("#email").val(); 
    ... etc 
} 

вместо

$(document).ready(function submitForm() { 
    // Initiate Variables With Form Content 
    var name = $("#name").val(); 
    .... 

---

EDIT: откройте консоль (F12), а также добавить некоторые журналы, чтобы увидеть, что происходит

$(document).ready(function() { 
    $("#contactForm").validator().on("submit", function(event) { 
     if (event.isDefaultPrevented()) { 
      console.log("rrrr"); 
     } else { 
      event.preventDefault(); 
      submitForm(); 
     } 
    }); 

    $("#msgSubmit").removeClass("hidden"); 
}); 

function submitForm() { 
    $.ajax({ 
     type: "POST", 
     url: "process.php", 
     data: $("#contactForm").serialize(), 
     success: function(text) { 
      console.log(text); // should be "invalid" or "success" 
     }, 
     error : function() { 
      console.log('epic fail'); 
     } 
    }); 
} 

Answer 2

Четвертый аргумент mail должны быть дополнительными заголовками, а не только адресом электронной почты отправителя. Таким образом, вы, чтобы переписать функцию:

$headers = 'From: ' . $email . "\r\n"; 
$success = mail($EmailTo, $Subject, $message, $headers); 

Но я хотел бы предложить вам добавить электронную почту отправителя в тело сообщения. Поскольку предлагаемое решение уязвимо из-за отсутствия проверок на адрес электронной почты отправителя.

$message .= "\n\n" . 'From: '. $email; 
$success = mail($EmailTo, $Subject, $message); 

Answer 3

Скрытие вашего сообщения «Сообщение отправлено» и очистка входов по прошествии определенного времени.

Вы бы сделали это по телефону setTimeout(). Что-то вроде этого:

setTimeout(function() { myCleanupFunction(); }, 5000); 

Это будет вызывать myCleanupFunction() после 5 секунд ожидания.

Документация на how to use setTimeout().

или, как он выглядит в исходном коде:

formSuccess() { 
    $("#msgSubmit").removeClass("hidden"); 
    setTimeout(function() { myCleanupFunction(); }, 5000); 
} 

Answer 4

Некоторые из ваших яваскрипта функций вызывается во время загрузки страницы, которые не то, что вы намерены.

Только поставить функции в оператор $(document).ready(), если вы хотите, чтобы эти функции выполнялись в режиме загрузки страницы.

Вот рабочая версия вашего javascript и jsfiddle, которая заменяет функцию $.ajax тестовой функцией под названием testAjax. Все testAjax действительно вызывает функцию success.(заменить ajaxTest на $.ajax). Вы увидите, что jsfiddle ведет себя так, как вам хочется.

function formSuccess() { 
    $("#msgSubmit").removeClass("hidden"); 
    document.getElementById('msgSubmit').innerHTML = 'Message submitted!'; 
    setTimeout(function() { 
     $("#msgSubmit").addClass("hidden"); 
     }, 5000 
    ); 
} 

// test version of ajax, replace with real "$.ajax()" in production 
function ajaxTest(ajaxData) { 
    // just a test, so call the success callback 
    ajaxData.success('success'); 
} 

function submitForm() { 
    // Initiate Variables With Form Content 
    var name = $("#name").val(); 
    var email = $("#email").val(); 
    var message = $("#message").val(); 

    // replace 'ajaxText' with '$.ajax' in production 
    ajaxTest({ 
     type: "POST", 
     url: "process.php", 
     data: "name=" + name + "&email=" + email + "&message=" + message, 
     success : function(text){ 
      if (text == "success"){ 
       formSuccess(); 
      } 
     } 
    }); 
} 

$(document).ready(function() { 
    $("#contactForm").on("submit", function (event) { 
      // prevent default form submit 
      event.preventDefault(); 
      // call our own submit 
      submitForm(); 
     } 
    ); 
});