Execute jQuery script after submitting a form

Question

I want to execute a jQuery script after submitting a form. The jQuery script it's only a line that will fade In a hidden that will show if the e-mail have been sent or not sent.

The PHP code is at the top of the file and I don't know if staying the PHP code at the top is the problem but I tried moving de PHP above the jquery script but it doesn't work.

EDIT:

Now I have that code in my index.php

        $(document).ready(function) {
            $('form').submit(function) {
                $.ajax({
                    url: "mail.php",
                    type: "POST",
                    data: {
                        name: $('input[name="name"]').val(),
                        email: $('input[name="email"]').val(),
                        msg: $('input[name="msg"]').val()
                    },
                    cache: false,
                    success: function(response) {
                        $('#result').html(response);
                    }
                });
                return false;
            });
        });

In mail.php I have that other code

$name = $_POST['name'];
$mail = $_POST['email'];
$msg = $_POST['msg'];

if(mail('test@test.com', $name, $msg)) {
    echo 'Pass!';
} else {
    echo 'Fail!';
}

When I executed it nothing happens and the URL shows the data that I wrote in the inputs but any message appears.

Answer 1

Here's a simple example for processing a form with AJAX. Notice the IDs: #emailForm is the ID of the form, and #out is the ID of some HTML element (such as a div or p) where you want to display the result. The function email.php is your server side script to send the email and return the result.

$(document).ready(function() {
    $('#emailForm').submit(function(){
        $.ajax({
        url: "email.php",
        type: 'POST',
        data: {
            name: $('input[name="name"]').val(),
            email: $('input[name="email"]').val(),
            msg: $('input[name="msg"]').val()
        },
        cache: false,
        success: function(responseText){
            $('#out').html(responseText);
        }
        });
        return false;
    });
});

On the server side, email.php (or whatever you want to call it) processes the data and sends the email. The data can be retrieved from the $_POST array. After sending or attempting to send the email, email.php can simply echo the result to be inserted in the HTML element with the id of "out."

$name = $_POST['name'];
$email = $_POST['email'];
$msg = $_POST['msg'];
//PUT CODE HERE FOR SENDING EMAIL

if ($success){
    echo "Email sent with success!";
} else {
    echo "Unable to send your email at this time. Please try again later.";
}

The output should appear in the HTML element:

<div id="out">Email sent with success!</div>