表单 onsubmit 与提交按钮 onclick
更新 来自@BrendanEich
@mplungjan onclick 的提交只是不属于按钮;表单 onsubmit 显然更好。
使用提交按钮的 onclick 来确定是否应提交表单的原因是什么?
我坚信,要
- 在提交之前执行某些操作并在出现错误时取消提交,表单的 onsubmit 事件是放置它的明显位置
- 如果您使用提交按钮的 onclick 并稍后决定使用 type="image" 事件 如果您将提交更改为按钮,则处理程序在许多浏览器中都会失败
- ,您还必须向 onclick 事件处理程序添加提交。
我正在寻找更喜欢使用提交按钮的 onclick 事件而不是表单的 onsubmit 的充分理由。
更新:请注意,我个人非常了解有关表单提交和验证的许多问题。
例如通过javascript提交不会触发onsubmit http://jsfiddle.net/mplungjan/3A4Ha/
<form onsubmit="alert('onSubmit called')">
<input type="text" value="This will submit on enter but in IE the onclick is not triggered" style="width:100%"/><br/>
<input type="submit" onclick="alert('Clicked')" />
</form><br />
<a href="#" onclick="alert('Submitting by script'); return false">Submit by script will not trigger onsubmit</a>
另外,如果您在我的小提琴中的表单中按回车键
历史记录:
在这里进行讨论
我非常不喜欢使用提交按钮的 onclick 来处理任何事情,因为许多1年来发现这在许多浏览器中不起作用,大多数旧版本的 IE。 我列出了一些明显的原因,但我确信它们不会说服老用户。
SO 的社区可以帮我把这个钉在墙上吗,就像他们钉 w3schools 一样? 也请随意就我如何以可接受的方式表达这个问题发表评论。
1:从 NS2.x 和 IE3.02 开始
UPDATE
From @BrendanEich
@mplungjan onclick of submit just falls out of that being a button; form onsubmit is clearly better.
Which would be the reasons to ever use the onclick of a submit button to determine whether or not the form should be submitted?
I believe strongly that
- to execute something before submit and cancel the submit in case of error, the form's onsubmit event is the obvious place to put it
- If you use the onclick of a submit button and later decide to use type="image" the event handler will fail in many browsers
- if you change the submit to a button, you will have to add a submit to the onclick event handler too.
I am looking for strong reasons to prefer using a submit button's onclick event over the form's onsubmit.
UPDATE: Please note that I am personally well aware of many of the issues around form submission and validation.
For example that submitting by javascript will not trigger the onsubmit
http://jsfiddle.net/mplungjan/3A4Ha/
<form onsubmit="alert('onSubmit called')">
<input type="text" value="This will submit on enter but in IE the onclick is not triggered" style="width:100%"/><br/>
<input type="submit" onclick="alert('Clicked')" />
</form><br />
<a href="#" onclick="alert('Submitting by script'); return false">Submit by script will not trigger onsubmit</a>
Also that IE will not trigger the onclick if you hit enter in the form in my fiddle
History:
Got into a discussion here
html button not clickable without being disabled
I have an intense dislike of using the onclick of a submit button for ANYTHING due to many1 years of seeing this not work in a number of browsers, mostly older version of IE.
I have listed a few of the obvious reasons, but I am sure they will not convince the hardened user.
Can SO's community help me nail this one to the wall, like they nailed w3schools?
Also feel free to give comments as to how I can phrase this question in an acceptable manner.
1: since the days of NS2.x and IE3.02
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
Form onsubmit 是一种更正确的方法,原因很简单,表单也可以使用
键提交,而不仅仅是单击提交按钮。Form onsubmit is a more correct approach, for the simple reason that a form can also be submitted with the
<ENTER>
key, and not just by clicking the submit button.没有直接理由使用 from 的 onsubmit 处理程序而不是按钮的 onclick 处理程序。人们应该根据事件的意图来使用命名事件。
您可以考虑包含两个操作的场景 - “发送”操作(如“发送电子邮件”)和“保存”(如“草稿”)。前一个操作假定以连贯的方式填写表单,而后一个操作应允许用户保留用户喜欢的任何状态。这使得点击处理程序成为决定验证和取消的理想场所。在这种情况下,提交事件的相关性尚未确定。
为了使事情变得更加复杂,您可以在场景中添加自动保存和乐观并发。
恕我直言,多年来在这个问题上的尝试和错误导致 HTML5 标准对这个问题做出了有利于按钮元素的裁决。请参阅按钮的 [form*] 属性,这些属性允许单独更改每个按钮的表单操作和方法。
There are no direct reasons to use a from’s onsubmit handler over a button’s onclick handler. One should use named events according to their intent.
You may consider a scenario with two actions – a “send” action (as in “to send an e-mail”) and a “save” (as in “draft”). The former action assumes the form filled in a coherent manner, while the latter action should allow the user to persist whatever state the user likes. That makes the click handlers ideal places to decide on validation and cancellation. The relevance of the submit event in this case is undetermined.
To make the matter even more complicated you may add auto-save and optimistic concurrency to the scenario.
IMHO The years of tries and errors in the matter resulted in the HTML5 standard to have ruled the question in favor of the button element. See button’s [form*] attributes that allow to change the form action, method by each button individually.