为什么命名你的HTML表单提交按钮“提交”中断了什么?

时间:2022-04-09 08:39:09

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:

在ASP.NET webforms和ASP 3(经典ASP)中,我遇到了一个问题,即命名表单提交按钮“提交”会“破坏”。下面是呈现的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?

那么,是否有任何HTML / HTTP /浏览器专家知道为什么在提交按钮上设置id =“submit”会导致任何问题?

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?

这个SO评论似乎暗示“提交”是一个保留的关键字。但为什么“id”或“name”属性会与此相关?这个“保留”关键字如何以导致冲突的方式实现?

thanks again

4 个解决方案

#1


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

表单元素有一个名为submit的方法,但表单元素也是成员。

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.

如果您有一个名为submit的表单中的按钮,则可以使用document.form1.submit访问它。但是,因为它与submit方法的名称相同,所以不再有任何方法可以访问该方法。如果您使用该方法提交表单,那将不再有效。

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

例如,如果您有一个使用Javascript提交表单的按钮,则不起作用:

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

当按钮尝试使用submit方法时,它将获得对自身的引用(以及尝试调用它时的错误消息,因为按钮不是函数)。

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

我会敦促你远离所有javascript的DOM保留字。在你定义的所有内容之前使用“my”,或者使用$,或者其他明显不会与你不小心过载并造成破坏的保留字冲突的东西。

#3


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

生成的代码隐藏允许您将事件绑定到对象,它是根据您指定的值命名的。

#4


Just use onsubmit if proble in form submission

如果表单提交中有问题,请使用onsubmit

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

#1


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

表单元素有一个名为submit的方法,但表单元素也是成员。

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.

如果您有一个名为submit的表单中的按钮,则可以使用document.form1.submit访问它。但是,因为它与submit方法的名称相同,所以不再有任何方法可以访问该方法。如果您使用该方法提交表单,那将不再有效。

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

例如,如果您有一个使用Javascript提交表单的按钮,则不起作用:

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

当按钮尝试使用submit方法时,它将获得对自身的引用(以及尝试调用它时的错误消息,因为按钮不是函数)。

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

我会敦促你远离所有javascript的DOM保留字。在你定义的所有内容之前使用“my”,或者使用$,或者其他明显不会与你不小心过载并造成破坏的保留字冲突的东西。

#3


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

生成的代码隐藏允许您将事件绑定到对象,它是根据您指定的值命名的。

#4


Just use onsubmit if proble in form submission

如果表单提交中有问题,请使用onsubmit

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