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