jQuery override form submit not working when submit called by javascript on a element

Question

I've got a page with a normal form with a submit button and some jQuery which binds to the form submit event and overrides it with e.preventDefault() and runs an AJAX command. This works fine when the submit button is clicked but when a link with onclick='document.formName.submit();' is clicked, the event is not caught by the AJAX form submit event handler. Any ideas why not or how to get this working without binding to all the a elements?

Answer 1

A couple of suggestions:

• Overwrite the submit function to do your evil bidding

     var oldSubmit = form.submit;     form.submit = function() {         $(form).trigger("submit");         oldSubmit.call(form, arguments);     } 

• Why not bind to all the <a> tags? Then you don't have to do any monkey patching, and it could be as simple as (assuming all the links are inside the form tag):

     $("form a").click(function() {         $(this).parents().filter("form").trigger("submit");     });