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就绪处理程序，你应该在控制台中看到一个错误告诉你{{ 1}}未定义。

将其更改为

submitForm()

而不是

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

编辑：打开控制台（F12），添加一些日志以查看发生了什么

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

Answer 3

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

您可以通过拨打setTimeout()来执行此操作。像这样：

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

等待5秒钟后，我会拨打myCleanupFunction()。

how to use setTimeout()上的文档。

或原始代码中的内容：

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

Answer 4

在页面加载时调用了几个javascript函数，这不是你想要的。

当您希望这些函数在页面加载时运行时，只将函数放在$(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();
        }
    );
});

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

4 个答案: