Question

3

AJAX: Submitting a form without refreshing the page

rated 0 times [ 7] [ 4] / answers: 1 / hits: 35179 / 12 Years ago, wed, january 9, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

deanna

Add To Favorites

Follow

Total Points: 84

Total Questions: 86

Total Answers: 107

Location: Cyprus

Member since Wed, Dec 8, 2021

3 Years ago

deanna questions

1 CastError: Cast to ObjectId failed for value XXXXXXXXXX (type string) at path _id for model XXXX

Thu, Apr 21, 22, 00:00, 2 Years ago

1 Next.js behavior on back button pressed

Mon, Sep 6, 21, 00:00, 3 Years ago

1 React-Router + Typescript error while wrapping component with Router No overload matches this call

Sat, Feb 13, 21, 00:00, 3 Years ago

1 Use the webpack asset module with a custom output filename

Sun, Jan 17, 21, 00:00, 3 Years ago

1 React js random color

Sun, Nov 15, 20, 00:00, 4 Years ago

View All

answered 12 Years ago isaacvalentinn · Accepted Answer

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

    });

});