Bypassing Javascript form handler

Question

We are writing an ASP.NET MVC application. By default, if the client browser has Javascript, the handler for every form on the page is set, by Javascript, to be one that sends the submission down an Ajax "pipe" (progressive enhancement).

But, for one form (on a page of several), I'd like this handler to be bypassed/ignored. Is there a simple way to do this? Perhaps by overriding the handler by specifying my own onsubmit event directly in the DOM - or some other method?

We use jQuery, so those libraries are available to me.

Answer 1

I would most likely solve this by assigning some distinctive attribute to the form that breaks with your standards (the one that should not have AJAX behavior) - something like class="oldschool". In the JavaScript code, when hooking up the submit event handler on forms, I would then make sure to exclude any forms with this special mark:

$('form:not(.oldschool)').submit(function() {
    // Do fancy AJAX stuff
});

Update: In order not to change any external JavaScript files, and have the new behavior introduced simply by altering the HTML markup, consider doing something like this:

<form ... onsubmit="if (typeof $ == 'function') $(this).unbind('submit');">

It is no beauty, but it seems to get the job done - at least in the browsers I have available here.

Answer 2

Although I'm not sure I understand what you mean by "from the DOM" I assume you can't change the original ajax/js code but you should be able to insert a little script tag somewhere which runs after the code that sets the ajax submit handler.

Further assuming that the handler set is in the form $("form").submit(...) or similar you could use this

$('selectorForYourForm').unbind('submit');

As this runs after the original js code it would unbind any handler the original code set for the submit action of this form.