Question

I made a jQuery plugin which reprograms forms’ submit buttons to use ajax requests.

The problem appears when submit button isn’t a <submit> element, like this:

<div class="home" onclick="document.form.submit()">
     <h2>Save</h2>
</div>

Is there a way for me to find these elements in an “elegant” way?

Answer 1

Rather than modifying all the elements that may trigger form submission, you can bind to the submit event on the <form> itself:

$("form").submit(function(e) {
    e.preventDefault();  // Inhibit default submission.
    // Now submit form through AJAX...
});