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

Question

I have a contact form on my website that is not posting the success or error message as it should.

The weird thing is I have used this exact same form, php, and ajax script on several other sites and it works great. In fact, it used to work great on the site in question.

The website is https://www.pouncingfoxdesign.com . The contact form is at the bottom. Feel free to fill it out for testing purposes.

Here's the form and script:

<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>

And here's the 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
}
?>

What I want it to do is replace the form with the success message for a few seconds and then go back to the form. What it does instead is just go to the email.php file with the success message being all that's on the screen.

If you want to check out https://www.mooreengaging.com , the same script and php file is used for that site. It works great and you can see my intended results. Again, feel free to fill out the form for testing purposes.

I have tried to use other ajax scripts and have tried to rework it several different times, but no matter what when clicking submit it just loads the php file. It's like it is bypassing the ajax script altogether.

Thanks!

EDIT: I have received the emails from you guys testing and they look right. So it is working, just not posting the success message as I'd like.

Answer 1

Ok, I figured it out. I added <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> to the top of the page under the header.

I thought it was best to put jquery at the bottom?

Did it fail because I was trying to run that script before it loaded jquery?

Answer 2

Change

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

To

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

Because you use

event.preventDefault();