CODEWITHSUNDEEP
jquery
Fake Code Monkey Rashid
Fake Code Monkey Rashid

Reputation: 14557

How can I intercept a form without resulting in it being submitted twice?

I want to intercept a form, check for a condition and if it exists, prevent the default action. Otherwise, I want to pretend no such interception took place. The JavaScript looks something like this.

$("form").submit(function (event)
{
    $.ajax
    ({
        url: $(this).attr("action"),

        type: $(this).attr("method"),

        data: $(this).serialize(),

        dataType: "html",

        async: false,

        success: function (response)
        {
            if (foo in response) // This is just pseudo code.
            {
                event.preventDefault();

                // bar
            }
        }
    });
});

The problem is that the form is being submitted twice if foo is not found in response and I can't figure out why. I can assure you that it is a JavaScript issue. If I disable this progressive enhancement, everything works as designed.

EDIT: Adding return false at the end of the code is absolutely incorrectly. I stated that if foo is not found in response I want to pretend no such interception took place. That means I want the page to refresh and do whatever it was going to do.

I am already preventing the default event under very specific circumstances.

EDIT: sillyMunky and alex have touched on my issue. There is definitely a flaw in my design that I'm trying to resolve.

EDIT: I'm looking for help and I have provided code. Downgrading questions and answers without providing feedback is just plain rude.

Upvotes: 1

Views: 422

Answers (4)

sillyMunky
sillyMunky

Reputation: 1278

The problem is that the form is submitting by html and submitting by ajax. I would turn the submit button into any other kind of button (so it doesn't fire off the form) and then use the ajax call (called onclick) to determine whether or not to send the form off. If this decision depends on a server response then you have no choice but to submit it twice if the condition requires the form to be updated.

Upvotes: 1

alex
alex

Reputation: 490313

It appears you are submitting the form via XHR. If so, just call event.preventDefault() at the top of your submit() function.

If you want to natively resubmit the form later in the success callback, call the form's native submit() event, i.e. $('form')[0].submit() (which won't trigger jQuery's submit() which would cause an infinite loop because of the rehandling of the condition).

Using async: false will lock the browser before the request has finished. Don't do that.

Upvotes: 3

Ivan
Ivan

Reputation: 10372

It appears that you need to cancel the original request. Also, by the time your other request is sent, it is too late to cancel the event.

Either return false or e.preventDefault() to cancel the original request.

Upvotes: 0

zerkms
zerkms

Reputation: 254944

Just put return false; in the very end of your function (event) body

Upvotes: 3

Related Questions