Why is my form not submitting when the submit button is called submit?

Question

I need to check if the form has been submitted by the user, and then perform some operation before it is programmatically submitted.

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 submit button of the form is called "submit", it does not.

It even works fine if the button is called "Submit." (upper case "S")

I'm just wondering why this is?

Here is the script

Answer 1

You have fallen victim to some ancient DOM quirks. Namely, forms in the DOM get all of their input elements (and buttons too), set up as properties by their name:

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

leads to:

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

which is unsuccessful when you have any control called submit , because it obscures your original form submission method.

Edit: By the way, for reading on many of these traps, I suggest taking a look at the fantastic DOMLint Kangax documentation .