Ajax无法捕获php联系人表单脚本

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();