提交联系表单时未定义页面刷新

Question

我正在为我的网站构建基本联系表单（三个字段）。我有用HTML和CSS构建的表单;我所要做的就是构建PHP，使表单响应发送到我的电子邮件。我找到了一个教程，并构建了PHP文件（工作正常），但希望表单在后台提交，而不是离开原始页面。我找到了一个使用Ajax的online tutorial，经过一些调整后，我主要是为了工作。我现在遇到的唯一问题是，当我收到带有响应的电子邮件时，邮件字段会以“未定义”的形式返回。我对HTML和CSS有了很好的把握，但PHP和JS对我来说是新手（刚刚开始学习他们的这个项目），所以任何关于如何解决这个问题的帮助，以及可能纠正任何错误的代码将是一个巨大的帮助。我已经包括形式HTML，PHP，和JS以下（PHP和JS都命名为 '接触。[文件]'。

HTML

<div id="contact_form"> 
    <form name="contact" action=""> 
    <div class="field"> 
     <label for="name">Name</label> 
     <input type="text" name="name" id="name" required/> 
    </div> 
    <div class="field"> 
     <label for="email">Email</label> 
     <input type="text" name="email" id="email" required/> 
    </div> 
    <div class="field"> 
     <label for="comments">Comments</label> 
     <textarea name="comments" id="comments" rows="3"></textarea> 
    </div> 
    <ul class="actions"> 
     <li><input type="submit" name="submit" class="button" id="submit_btn" value="Send Message" /></li> 
    </ul> 
    </form> 
</div> 

PHP

<?php 
$name = $_POST['name']; 
$email = $_POST['email']; 
$comments = $_POST['comments']; 
$formcontent="From: $name \n Message: $comments \n"; 
$recipient = "alltheladsmedia@gmail.com"; 
$subject = "Message From Website"; 
$mailheader = "From: $email \r\n"; 
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!"); 
echo "Thank You!" . " -" . "<a href='index.html' target='_blank' style='text-decoration:none;color:#505050;'> Return Home</a>"; 
?> 

JS

$(function() { 
    $('.error').hide(); 
    $(".button").click(function() { 
    // validate and process form here 

    $('.error').hide(); 
    var name = $("input#name").val(); 
     if (name === "") { 
     $("label#name_error").show(); 
     $("input#name").focus(); 
     return false; 
    } 
     var email = $("input#email").val(); 
     if (email === "") { 
     $("label#email_error").show(); 
     $("input#email").focus(); 
     return false; 
    } 
     var message = $("input#message").val(); 
     if (message === "") { 
     $("label#message_error").show(); 
     $("input#message").focus(); 
     return false; 
    } 

$.ajax({ 
    type: "POST", 
    url: "contact.php", 
    data: {name:name,email:email,message:message}, 
    success: function() { 
    $('#contact_form').html("<div id='success'></div>"); 
    $('#success').html("<h2>Your message was successfully submitted!</h2>") 
    .append("<p>We will get back to you within 24-48 hours.</p>") 
    .hide() 
    .fadeIn(1500, function() { 
     $('#success'); 
    }); 
    } 
}); 
return false; 
    }); 
    }); 

Answer 1

在你的标记中，该字段的id是“comments”，但是你正在寻找你的JS和PHP中的“message”

Answer 2

出现打印您的邮件结果

if(@mail($recipient, $subject, $formcontent, $mailheader)) 
    { 
     echo "Mail Sent Successfully"; 
    }else{ 
     echo "Mail Not Sent"; 
    } 

Answer 3

做一些改变，如果你正在使用jQuery 3.

更改此

$(".button").on("click", function() { 
    // Validation here 
    // Put ajax outside this block 
}); 

编辑HTML表单，这样的代码。

检查设备。工具如果action属性被php正确添加。

<form id="contact" name="contact" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post" > 

和AJAX调用此

$("#contact").on("submit", function(e) { 
    e.preventDefault(); // Now the page won't redirect 
    var url = $(this).attr("action"); 
    // Check console if contact is printed after the form is submitted 
    // If contact is printed the url is right 
    console.log(url); 
    $.ajax({ 
    type: "POST", 
    url: url, 
    data: $(this).serialiseArray(), // Found a typo here fixed 
    success: function() { 
     // Your stuffs 
    } 
    }); 
}); 

不要把输入实地核查中Ajax调用。

让我知道如果你发现任何问题，所以我可以修复我的代码。