Question

我的网站上有一个联系表单，没有发布成功或错误消息。

奇怪的是我在其他几个网站上使用过这个完全相同的表单，php和ajax脚本，效果很好。事实上，它曾经在相关网站上运作良好。

该网站为https://www.pouncingfoxdesign.com。联系表格位于底部。请随意填写以供测试。

这是表格和脚本：

<div class="col-md-8 col-sm-9 wow form1 fadeInLeft">
            <div class="contact-form clearfix contactForm">
                <form id="form" action="php/email.php" class="contactForm" 
method="post">
                <div class="messages"></div>
                    <div class="input-field">
                        <input type="text" class="form-control" name="name"  
placeholder="Your Name" required="">
                    </div>
                    <div class="input-field">
                        <input type="email" class="form-control" 
name="email" placeholder="Your Email" required="">
                    </div>
                    <div class="input-field message">
                        <textarea name="message" class="form-control" 
placeholder="Your Message" required=""></textarea>
                    </div>
                    <input type="submit" name="submit" class="btn btn-blue 
pull-right" value="SEND MESSAGE" id="msg-submit">
                    <div class="g-recaptcha fadeInLeft" data-
sitekey=""></div>
                </form>
            </div> <!-- end .contact-form -->
        </div> <!-- .col-md-8 -->


<script> $('#form').on('submit', function(e) {
    event.preventDefault(); //Prevents default submit
    var form = $(this); 
    var post_url = form.attr('action'); 
    var post_data = form.serialize(); //Serialized the form data for   
process.php
    // $('#loader', '#form').html('<img src="img/forms/loading.gif" /> 
Please Wait...');
    $.ajax({
        type: 'POST',
        url: 'php/email.php', // Your form script
        data: post_data,
        success: function(msg) {
            var old_html = form.html()
            $(form)
                .html(msg).fadeIn();
            setTimeout(function(){
                $(form)
                    .html(old_html).fadeIn();
            }, 4000); 
        },
        error: function(xhr, ajaxOptions, err){
            var old_html = form.html()
            $(form).fadeOut(500)
                .html("<h3>There was an error. Please try again.
</h3>").fadeIn();
            setTimeout(function(){
                $(form).fadeOut(500)
                    .html(old_html).fadeIn();
            }, 3000); 
        }
    });
});
</script>

这就是PHP：

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];

$success = "
<div class=\"row-fluid\">
<div class=\"span12\">
    <h1>Submission successful</h1>
    <h3>Thank you for contacting us!</h3>
</div>
</div>";


$to = "email@email.com";
$subject = "$name\n filled Pouncing Fox Desing Form";
$txt = "From: $name\n E-Mail: $email\n Comments:\n $message";
$headers = "From: Pouncing Fox Design" . "\r\n" ;

if(isset($_POST['g-recaptcha-response'])){
      $captcha=$_POST['g-recaptcha-response'];
    }
    if(!$captcha){
      echo '<h2>Please check the the captcha form.</h2>';
      exit;
    }
    $secretKey = "";
    $ip = $_SERVER['REMOTE_ADDR'];


$response=file_get_contents
("https://www.google.com/recaptcha/api/siteverify?  
secret=".$secretKey."&response=".$captcha."&remoteip=".$ip);
    $responseKeys = json_decode($response,true);

if (mail($to, $subject, $txt, $headers)) {
    echo "$success"
} else {
echo 'Form submission failed. Please try again...'; // failure
}
?>

我想要它做的是用几秒钟的成功消息替换表单，然后返回到表单。它的作用只是转到email.php文件，屏幕上显示成功消息。

如果要查看https://www.mooreengaging.com，则该网站使用相同的脚本和php文件。它工作得很好，你可以看到我的预期结果。再次，请随意填写表单以进行测试。

我曾尝试使用其他ajax脚本，并试图在几个不同的时间重做它，但无论什么时候单击提交它只是加载php文件。它就像完全绕过ajax脚本一样。

谢谢！

修改我收到了你们测试的电子邮件，他们看起来很正确。所以它正在发挥作用，而不是像我一样发布成功消息。

Answer 1

好的，我明白了。我在标题下方的页面顶部添加了<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>。

我认为最好将jquery放在底部？

它是否因为我在加载jquery之前尝试运行该脚本而失败了？

Answer 2

更改

$('#form').on('submit', function(e)

要

$('#form').on('submit', function(event)

因为你使用

event.preventDefault();

Ajax没有捕获php联系表单脚本

2 个答案: