表格已验证，但未发送电子邮件

Question

我的表单存在一些问题，该表单已经过正确验证，但是当单击“提交”按钮时，没有电子邮件发送出去。 当我检查原始邮件发送时，在服务器上启用了邮件功能。 这里有什么问题？ 请参阅下面的代码

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

mail的第四个参数应该是附加标题，而不仅仅是发件人的电子邮件地址。 因此，您必须重写函数：

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

但是我建议您将发件人的电子邮件添加到邮件正文中。 由于建议的解决方案由于缺少对发件人电子邮件地址的检查而容易受到攻击。

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

Answer 2

第二个函数似乎并不是您想的那样，只是给您准备了名称的DOM ready处理程序，您应该在控制台中看到一条错误消息，告诉您未定义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();
   ....

---

编辑：打开控制台（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 3

隐藏“已提交消息”消息并在指定时间后清除输入很简单。

您可以通过调用setTimeout（）来实现 。 像这样：

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

等待5秒后将调用myCleanupFunction() 。

有关如何使用setTimeout（）的文档。

或原始代码中的样子：

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

Answer 4

页面加载时正在调用您的多个javascript函数，这不是您想要的。

仅当您希望函数在页面加载时运行时，才将它们放在$(document).ready()语句中。

这是您的javascript的工作版本，还有一个jsfiddle ，它用一个名为testAjax的测试函数代替了$.ajax函数。 testAjax所做的只是调用您的success函数。 （将生产中的$.ajax替换为ajaxTest ）。 您会看到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();
        }
    );
});