javascript 未调用表单“提交”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19847203/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Form 'onsubmit' not getting called
提问by user1667191
Here's the part of my form:
这是我的表格的一部分：
<form name='form-main' onsubmit='return validate()' action='' method='post'>
<center><input type='submit' onClick='this.disabled=true; this.form.submit();' value='I accept - Download the GM!'/></center>
</form>
and here's the validatefunction:
这是validate功能：
function validate()
{
// this is just to test if it actually shows
alert('You must not leave any of the fields blank!');
return false;
}
Whenever I hit the submit button, nothing happens, the page just reloads.. I would like it so it shows the alert dialog.
每当我点击提交按钮时，什么也没有发生，页面只是重新加载..我希望它显示警报对话框。
回答by T.J. Crowder
When you call the form's submitfunction, the submitevent is not fired. This isby design, the assumption is that if you're triggering the submission from code, you've already done any necessary validation. (Note that this is true of the HTMLFormElement#submitfunction; it is notnecessarily true of the wrappers libraries put around it.)
当您调用表单的submit函数时，submit不会触发该事件。这是设计使然，假设是如果您从代码触发提交，则您已经完成了任何必要的验证。（请注意，这是真正的HTMLFormElement#submit功能;它是不是一定把图书馆周围的包装也是如此。）
In your example, I would remove the clickhandler on the button. It's a submit button, so just put any relevant logic in the submitevent on the form. Alternately, if you prefer, call validate()as part of the button's click.
在您的示例中，我将删除click按钮上的处理程序。它是一个提交按钮，因此只需submit在表单的事件中放置任何相关逻辑即可。或者，如果您愿意，可以将调用validate()作为按钮的click.
回答by David Fischer
You can override the original prototype "submit" method like this:
您可以像这样覆盖原始原型“提交”方法：
HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = function (){
this._submit();
alert('Deddy Is Great :)'); // or fire the onsubmit event manually
};
回答by j08691
The onclick event of your submit button is firing immediately before the onsubmit event of your form, and this is disabling subsequent events from propagating and firing, which causes the validate function to never get triggered. You can see this is you remove the this.disabled=true;from your code example.
提交按钮的 onclick 事件在表单的 onsubmit 事件之前立即触发，这会阻止后续事件的传播和触发，从而导致验证函数永远不会被触发。您可以看到这是您this.disabled=true;从代码示例中删除的。
Per the docs at W3:
A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element.
禁用的表单控件必须防止在用户交互任务源上排队的任何单击事件在元素上分派。
You should remove the click event code from the submit button, and simply allow the function to do what you need it to do, including disabling the button. For example:
您应该从提交按钮中删除单击事件代码，并简单地允许该函数执行您需要执行的操作，包括禁用该按钮。例如：
function validate() {
// this is just to test if it actually shows
document.getElementById('sub').disabled=true;
alert('You must not leave any of the fields blank!');
return false;
}
