Submitting a form with ajax after jQuery validation is successfull

Question

Ok so I have a form that I am validating with jQuery Validation and I am trying to now submit it with AJAX. With the code below, once the form is valid and you click on submit the page reloads and the inputs are placed in the url address bar (i.e. method="get")

In the ajax method I have that set to POST but it doesn't appear to be using the ajax call.

What did I do wrong?

$().ready(function() {
    var $form = $(this);
   //validate the inquiry form on keyup and submit
    $("#inquiryForm").validate({
        showErrors: function(errorMap, errorList) {
            for (var error in errorMap)  {
                $.growl.error({ message: errorMap[error] });
             }
        },
        onkeyup: false,
        rules: {
            fullName: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            inquiry: {
                required: true,
                minlength: 5,
                maxlength: 500
            }
        },
        messages: {
            fullName: "Your name is required",
            email: "A valid email address is required",
            inquiry: "Your inquiry is required and must have between 5-500 characters"
        },

        submitHandler: function(form) {
            $.ajax({
                url: form_submit/inquiry_form/inquiry_form.php,
                type: "POST",
                data: $(form).serialize(),
                success: function(response) {
                    $('#inquiryFormHolder').html("Your form was submitted!");
                }            
            });
            return false;
        }
    });
});

where you pass the `var $form` in your code? Might be you have to pass here with `submitHandler: function( $form ) {` — jogesh_pi, Sep 18 '13 at 04:25

score 8 · Accepted Answer · edited Apr 04 '17 at 06:34

8

Try to use :

submitHandler: function(form) {
    $.ajax({
        url: form_submit/inquiry_form/inquiry_form.php,
        type: "POST",
        data: $(form).serialize(),
        success: function(response) {
            $('#inquiryFormHolder').html("Your form was submitted!");
        }            
    });
    $form.submit();
}

edited Apr 04 '17 at 06:34

Super User

9,448
3
31
47

answered Sep 18 '13 at 04:22

Fouad Fodail

2,653
1
16
16

Nope. Same results. Thanks though. – Mitch Evans Sep 18 '13 at 04:24
have you tried to put it after the ajax call? and remove the return false; – Fouad Fodail Sep 18 '13 at 04:32
@FouadFodail Friend, you want him to put what after the ajax call? Please help. – KingFeming Oct 03 '14 at 09:24

Submitting a form with ajax after jQuery validation is successfull

1 Answers1

Linked