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

Question

Hey guys

In ASP.NET webforms and ASP 3 (Classic ASP), I came across an issue whereby naming your form submit button "submit" would "break things". Below is the rendered HTML:

<input type="submit" name="Submit" value="Submit" id="Submit" />

I say "break things" because I'm not sure exactly why or what happened. But the symptoms usually were that pressing the submit button sometimes did nothing i.e. it just didn't work. But sometimes it did work.

In fact, I just built a quick one page test with the the code below, and submitting worked fine:

<form id="form1" runat="server">
<div>
 <asp:TextBox ID="txtTest" runat="server" />
 <asp:Button ID="Submit" runat="server" Text="Submit" />
</div>
</form>

But, in the past, this problem has arisen, and renaming the button always made the symptom go away.

So, does any HTML/HTTP/Browser expert know of any reason why setting id="submit" on a Submit button would cause any problems?

EDIT

this SO comment seems to suggest "submit" is a reserved keyword. But why would the "id" or "name" attributes intefere with this? And how does this "reserved" keyword get implemented in such a way that would cause conflicts?

thanks again

Answer 1

The code-behind that is generated that allows you to bind events to the object are named based on the values you specified.

Answer 2

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).

Answer 3

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.