jQuery / PHP ajax联系表格

Question

我已经为此奋斗了很长一段时间，一直在搜索问题，教程和论坛，以找到有效的解决方案。 我在PHP领域非常绿，现在才开始学习。

正在进行的页面可以在这里找到： http : //williamsfuller.com/limedropdesign/

目标：使用jQuery Validate（ http://jqueryvalidation.org/ ）进行前端验证，如果验证成功，则在submitHandler中对一个采用格式值并将其发布到服务器的php文件进行ajax调用。 在ajax.done函数上，清除表单并显示提交已成功。

我使用ajax的原因是因为我不希望页面刷新并将用户发送回页面顶部。 这是一个单页组合，如果我要在表单上执行post方法，它将通过重新加载页面来破坏体验。

到目前为止，我已经取得了以下成就：-我已经完成jQuery验证-如果验证成功，则ajax调用会正确运行以激活联系表单提交文件-在ajax.done函数上，联系表单将清除，并且成功消息会向下滑动，告知用户消息已发送-在php方面，我能够对运行的邮件功能进行硬编码，该功能告诉我ajax调用正在工作并且php文件正在工作。

<?php    
mail('email@gmail.com', 'Mail from Lime Drop Design', 'some body content for the email ');
?>

我遇到的问题是获取jQuery值并将其放入一个有效的if（$ _ POST）{}中，并让其发送电子邮件。

我也有一个蜜罐，可以用来抓一些机器人，如果所有信息都经过验证并且主题字段仍然填写完，我想让POST消失。

HTML：

<form id="contactForm" method="get" action="">
<div class="form-group">
    <input class="form-control"
           type="text"
           name="name"
           id="name"
           minlength="2"
           placeholder="Name" required>
</div>
<div class="form-group">
    <input class="form-control"
           type="email"
           name="email"
           id="email"
           placeholder="Your email address" required>
</div>
<div class="form-group">
    <textarea class="form-control contactMessage"
              name="message"
              id="message"
              rows="8"
              minlength="10"
              placeholder="Enter a message" required></textarea>
</div>

<input type="text" id="subject" name="subject" autocomplete="off">

<div class="form-actions">
    <input type="hidden" name="save" value="contact">
    <button id="formSubmit" type="submit" class="btn contact-btn pull-right">Send</button>
</div>
<div id="result">
    Thank you, your message has been sent to Liz!
</div>
</form>

JavaScript：

$(document).ready(function(){
    $('#result').hide();
    $.validator.setDefaults({
        submitHandler: function() {
            var nameValue = $('#name').val();
            var emailValue = $('#email').val();
            var messageValue = $('#message').val();
            console.log(nameValue, emailValue, messageValue);
            $.ajax({
                type: "GET",
                url: "contactSubmission.php",
                data: {
                    name: $('#name').val(),
                    email: $('#email').val(),
                    message: $('#messageValue').val()
                }
            }).done(function(){
                $('#contactForm').find("input[type=text], input[type=email], textarea").val("");
                $('#result').slideDown();
            });
        }
    });
    $("#contactForm").validate();
)};

PHP的工作：

<?php
mail('email@gmail.com', 'Mail from Lime Drop Design', 'some body content for the email outisde post function');
?>

PHP无法正常运作（我正在尝试实现的目标）：

<?php
if($_POST){
$to = 'email@gmail.com';
$subject = 'Contact Form Submission';
$message = $_POST['messageValue'];


if($_POST['subject'] != ''){
    die();
}

//Sanitize input data using PHP filter_var().
$nameValue        = filter_var($_POST["nameValue"], FILTER_SANITIZE_STRING);
$emailValue       = filter_var($_POST["emailValue"], FILTER_SANITIZE_EMAIL);
$messageValue     = filter_var($_POST["messageValue"], FILTER_SANITIZE_STRING);

mail($to, $subject, $message);
}
?>

任何帮助，将不胜感激。 我一直在尝试使它工作一段时间，现在我似乎只是停留在php POST上。 在此先感谢您提供任何输入或工作示例。

Answer 1

如前所述，您正在使用Jquery进行GET请求，而php则希望执行POST请求。

然后在您的php上，发布字段不是很好：您将“ Value”发布字段放在： $_POST["nameValue"]而在Jquery上，该字段似乎被命名为name ，请尝试将$_POST["nameValue"]更改为$_POST["name"]并对消息和电子邮件执行相同的操作。

编辑：在您的Jquery代码中的发布数据中将$('#messageValue').val()更改$('#message').val() ，此值是数据未成功发送到PHP的原因，在console.log中，您已输入了正确的ID，但未在发布数据中添加了ID，这就是为什么您认为php发送了正确的值。