PHP Ajax表单发送

Question

I am posting form data to a PHP script using a jQuery serizalize function.

My script is running ok and the PHP is executing although I am not receiving the posted values from my form in my PHP.

Here is my code

HTML:

<form id="contact_form" action="process.php" method="POST">
                        <div id="name-group" class="form-group">
                            <label for="name">Name</label>
                            <input type="text" class="form-control" name="name" placeholder="Ringo Starr" form="contact_form">
                        </div>
                        <div id="email-group" class="form-group">
                            <label for="email">Email</label>
                            <input type="text" class="form-control" name="email" placeholder="[e-mail]" form="contact_form">
                        </div>
                        <div id="email-group" class="form-group">
                            <label for="message">Message</label>
                            <textarea rows="4" class="form-control" id="formMessageArea" name="message" placeholder="Your message here..." form="contact_form"></textarea>
                            <span class="countdown"></span>
                        </div>
                        <div class="result"></div>
                        <button id="submitButton" type="submit" class="btn btn-success">Submit</button>
                    </form>

Ajax Post:

$.ajax({
        url: $form.attr('action'),
        type: 'POST',
        datatype : 'html',
        data: data,
        success: function(response) {
            if (response.status === "success") {
                $('.result').text("Success!!");
            } else if (response.status === "error") {
                $('.result').text("Error!!");
            }
        }
    });

Serialized Data:

name=Jamie+Berke&email=jamie_b25%40hotmail.com&message=testing+123

Here is my PHP:

<?php
$autoResponse = true; //if set to true auto response email will be sent, if you don't want autoresponse set it to false
$autoResponseSubject = "Demo Contact Form"; 
$autoResponseMessage = "Hi, thank you testing the JQuery Contact Form Demo.";
$autoResponseHeaders = "From: [e-mail]";  

//we need to get our variables first
$email_to =   '[e-mail]';
$subject  =   'A enquiry for The Retros!';
$name     =   $_POST['name'];
$email    =   $_POST['email'];
$message  =   $_POST['message'];

$body = "From: $name 
Message: 
$message";

$headers  = "From: $email
";
$headers .= "CC: [e-mail]
";
$headers .= "Reply-To: $email
";


if(mail($email_to, $subject, $body, $headers)){
    if($autoResponse === true){
        mail($email, $autoResponseSubject, $autoResponseMessage, $autoResponseHeaders);
    }
    echo 'success'; 
}else{
    echo 'error';/
}

?>

Here are the errors my PHP is returning:

Notice: Undefined index: name in C:\Users\Jberke\Documents\Projects\theRetros\src\process.php on line 10

Call Stack: 0.0010 235032 1. {main}() C:\Users\Jberke\Documents\Projects\theRetros\src\process.php:0

Notice: Undefined index: email in C:\Users\Jberke\Documents\Projects\theRetros\src\process.php on line 11

Call Stack: 0.0010 235032 1. {main}() C:\Users\Jberke\Documents\Projects\theRetros\src\process.php:0

Notice: Undefined index: message in C:\Users\Jberke\Documents\Projects\theRetros\src\process.php on line 12

Call Stack: 0.0010 235032 1. {main}() C:\Users\Jberke\Documents\Projects\theRetros\src\process.php:0

If i add a if ( isset( $_POST['submit'] ) ) { } around the PHP block nothing is returned to the jQuery-ajax success function and my form doesn't return any result although the script seems to execute fine.

Answer 1

        <script>
                $('#submitButton').click(function(){
                    var data = $('#contact_form').serialize(); 
                        $.ajax({
                        url: $('#contact_form').attr('action'),
                        type: 'POST',
                        datatype : 'html',
                        data: data,
                        success: function(response) {
                            console.log(response);
                            if (response.status === "success") {
                                $('.result').text("Success!!");
                            } else if (response.status === "error") {
                                $('.result').text("Error!!");
                            }
                        }
                    });
                });
        </script>

Try this