Why does naming your HTML form submit button "submit" break things?

The form element has a method named submit, but also has the form elements in the form as members.

If you have a button in the form named submit, you could access it using document.form1.submit. However, as that is the same name as the submit method, there is no longer any way of accessing that method. If you use the method to submit the form, that will no longer work.

For example, if you have a button that submits the form using Javascript, that doesn't work:

<input type="button" name="submit" onclick="this.form.submit();" value="try" />

When the button tries to use the submit method, it will instead get a reference to itself (and an error message when trying to call it, as the button is not a function).

I would urge you to stay away from all of javascript's DOM's reserved words. use "my" in front of everything you define, or $, or something else that is clearly not going to conflict with the reserved words that you can accidentally just overload and cause havoc.