jQuery/PHP ajax联系人表单


jQuery/PHP ajax contact form

我一直在与这个问题作斗争,搜索问题,教程和论坛,但没有找到一个有效的解决方案。我对PHP还是个新手,刚刚开始学习。

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

目标:使用jQuery Validate (http://jqueryvalidation.org/)进行前端验证,如果验证成功,则在submitHandler中运行对php文件的ajax调用,该文件接受表单值并将其发送到服务器。在ajax上。Done函数清除表单并显示提交已成功。

我使用ajax的原因是因为我不希望页面刷新并将用户发送回页面顶部。

这是一个单页的作品集,如果我要在表单上做一个post方法,它会破坏重新加载页面的体验。

迄今为止我所取得的成就:-我有jQuery验证工作-如果验证成功,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在这一点上。提前感谢任何输入或工作示例。

正如所指出的,您正在使用Jquery发出GET请求,而php期望发出POST请求。

然后在你的php中,post字段不太好:你把'Value' post字段:$_POST["nameValue"],而在Jquery似乎字段被命名为name,尝试改变$_POST["nameValue"]$_POST["name"],并做同样的消息和电子邮件。

编辑:改变$('#messageValue').val()$('#message').val()在你的Jquery代码中的post数据,这个值是为什么数据没有成功发送到PHP的原因,在你的console.log你已经把正确的ID,但不是在post数据,这就是为什么你在哪里认为正确的值是由PHP发送的