javascript - AJAX: Submitting a form without refreshing the page

Question

I have a form similar to the following:

<form method="post" action="mail.php" id="myForm">
   <input type="text" name="fname">
   <input type="text" name="lname">
   <input type="text" name="email">
    <input type="submit">
</form>

I am new to AJAX and what I am trying to accomplish is when the user clicks the submit button, I would like for the mail.php script to run behind the scenes without refreshing the page.

I tried something like the code below, however, it still seems to submit the form as it did before and not like I need it to (behind the scenes):

$.post('mail.php', $('#myForm').serialize());

If possible, I would like to get help implementing this using AJAX,

Many thanks in advance

Answer 1

You need to prevent the default action (the actual submit).

$(function() {
    $('form#myForm').on('submit', function(e) {
        $.post('mail.php', $(this).serialize(), function (data) {
            // This is executed when the call to mail.php was succesful.
            // 'data' contains the response from the request
        }).error(function() {
            // This is executed when the call to mail.php failed.
        });
        e.preventDefault();
    });
});