Can't stop AJAX form submission from opening Action target

Question

I basically copied an entire form submission code I had up and running on a Website and pasted it into a blank file in order to modify its contents and save some time. IN THEORY, then, if the original file stopped normal form submission from opening up the Action target file while still completing the submission, this one should do the same.

However, I can't get it to work like it did. I can't stop the submission from leaving the current window.

Can anyone please point me toward what I'm doing wrong?

(Aside from the PHP code I'm using the jQuery Validation Plugin, same as I was using in the previous form that worked as expected.)

Form HTML code:

<form id="form" class="appintro" method="post" action="manageform.php" enctype="multipart/form-data"></form>

JS

$.validator.setDefaults({
    submitHandler: function() { //<-- Handler called by jQuery Validation once form is validated
        $('.msg.sending').fadeIn(200);
        $.ajax({
            type: 'POST',
            url: form.attr('action'),
            data: form.serialize(),
            success: function() {
                alert('Success')
    },
            error: function() {
                alert('Failure')
            }
        });
        return false; //<-- This should stop the normal submission...
    }
});

I've also already tried calling the AJAX outside of the validator code, ie using $("form").submit(function(event)... , etc. Also tried setting data to form.serializeArray() , as recommended in some other SO post... Nothing does it.

Thanks in advance for your help!

EDIT 1

I've set up this jsFiddle to test it out in a simpler version. No matter what I place in AJAX's url , I get an error. If I fill the form's action , then I can't catch the submission.

Answer 1

Edit 2 Ok while fixing some bugs in my version of your js fiddle, I figured what the issue is.

This line is missing the form parameter

submitHandler: function() { 

It should look like this:

submitHandler: function(form) { 

Next, to call serialize, you need to wrap make it a jquery object. The form passed in by jquery validate is just a regular form object and not a jquery one. So you need to do this.

data: $(form).serialize(),

If you call form.serialize , you should get this error in Chrome: Uncaught TypeError: Object #<HTMLFormElement> has no method 'serialize' , which could explain why your browser is reloading.

Edit 1 I looked at your fiddle and I found some bugs, but I'm not sure they fix your problem. I feel like I just fixed some errors specific to jsfiddle.

Here is a link to an updated fiddle that works: http://jsfiddle.net/JSuUL/6/

Here is the code with some annotations

$.validator.setDefaults({
    // Need to pass in form variable
    submitHandler: function (form) {
        alert('Sending...')
        $.ajax({
            type: 'POST',

            // First off changed this to make the request work
            // http://doc.jsfiddle.net/use/echo.html
            url: '/echo/html/',

            // Instead of form, I used $(form) to reference the form as a jquery object.
            data: $(form).serialize(),

            success: function () {
                alert('Success!')
            },
            error: function () {
                alert('Failure!')
            }
        });
        return false;
    }
});

$(document).ready(function () {
    // I added a "#" here so we can grab the form. Your jsfiddle had $(form)
    $("#form").validate({
        rules: {
            name: {
                required: true,
                minlength: 2
            },
            surname: {
                required: true,
                minlength: 2
            },
        }
    });
});