Why does my form not submit when the submit button is named "submit"?

Question

I need to check if the form is submitted by the user and then perform some operation before subsequently submitting the form programmatically.

So I have this code:

$('form').submit(function (e) {
    e.originalEvent && e.preventDefault();

     //I change some things in the form here.

    !e.isTrigger && $(this).submit();
}); 

This works fine, but when the form submit button is named "submit" it does not.

It even works ok if the button is named "Submit". (uppercase "S")

I'm just curious as to why this is?

Here is a demo fiddle

Answer 1

You fell prey to some ancient DOM quirks. Namely, forms in the DOM get all their input elements (and buttons, too) exposed as properties by their respective name:

<form>
  <input name="foo">
</form>

results in:

var form = document.forms[0];
form.foo === document.getElementsByName('foo')[0];

which is unfortunate, when you have any control with the name submit, because it shadows your original form's submit method.

Edit: By the way, for reading on many of those pitfalls I suggest to take a look at Kangax' fantastic DOMLint documentation.