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

Question

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

Moneymaking

Answer 1

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

Annotate

Wow! There seems like there would be all manner of name-space collisions between the DOM and names declared for form controls then. – Propylene

name space collision is the one thing that javascript is most often criticized for. There is virtually nothing that is protected from accidental (or intentional) overloading, which is why the recommendation is to use various schemes to protect against collision such as wrapping everything in your own closure or having all your top level objects called something blatantly original. – Urbai

Answer 2

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.

Urbai

But, then you have awful names coming in on the server side, no? Are the DOM names case-sensitive; could one avoid collisions simply by capitalizing the first letter? – Propylene

I guess that depends on what you believe qualifies as "awful names". HTML is not case sensitive and even if it officially were, browsers would almost certainly forgive those sorts of mistakes. In any event, there are many non-ugly ways to make sure the names are your own, but yeah... you have to be a little flexible with your aesthetic judgements. :) – Urbai

HTML is not case-sensitve, but JavaScript is -- isn't the DOM a JS object? – Propylene

yes, but we're talking about HTML attributes here, right? The OP named a button "submit". This is not case sensitive (at least in so far as you can specify whatever name you want in any situation). That's precisely the issue the OP is having, however, if you want to try and get around it by utilizing case, you're certainly free to employ that solution. It may be entirely useful (though to my eyes it would be no less ugly than prepending "my" to your variables, if in fact code elegance is your concern. – Urbai

Answer 3

Just use onsubmit if proble in form submission

<form id="form1" runat="server" onsubmit="this.submit()">
<div>
    <asp:TextBox ID="txtTest" runat="server" />
    <asp:Button ID="Submit" runat="server" Text="Submit" Type="submit"/>
</div>
</form>

Hydride

Answer 4

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

Alphabetical