Question

See http://jsfiddle.net/8KNc7/5/ for a working example of what I am talking about (testing in Firefox 15 right now, haven’t tried others).

I have a form with a submit input and a button input that both submit the form data to the server, but only the submit input causes the jQuery submit event to run. Why is this?

Form:

<form action='/echo/html/' method='post' id='Form' name='Form'>
    <input type='hidden' value='posted' id='html' name='html'>
    <input type='submit' id='submit1' value='submit type'>
    <input type='button' id='submit2' value='button type' onclick='submitForm();'>
</form>

Javascript (running at the end of the body tag):

var theForm = document.forms['Form'];
if (!theForm) {
    theForm = document.Form;
}
function submitForm() {
    theForm.submit();
}

$(function () {
    $('form').submit(function () {
        alert('ok');
    });
});

Point is, I am expecting both buttons to cause the alert but only one does. I know I can submit change the submitForm function to make it work properly but I am trying to figure out what the difference is in why one of these works and the other does not.

Answer 1

The native form submit method bypasses the jQuery submit handler. You can use this to your advantage in several situations.

$("#form").submit(function(e) {
    e.preventDefault();

    // validation
    if (valid(this)) {
        this.submit(); // submit form, bypassing jQuery bound submit handler
    }

});