未调用表单“提交”

IT技术 javascript forms
2021-02-23 06:09:10

这是我的表格的一部分：

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

这是validate功能：

function validate()
{
    // this is just to test if it actually shows
    alert('You must not leave any of the fields blank!');
    return false;
}

每当我点击提交按钮时，什么也没有发生，页面只是重新加载..我希望它显示警报对话框。

3个回答

当您调用表单的submit函数时，submit不会触发该事件。这是 设计使然，假设是如果您从代码触发提交，则您已经完成了任何必要的验证。（请注意，这是真正的HTMLFormElement#submit功能;它是不是一定把图书馆周围的包装也是如此。）

在您的示例中，我将删除click按钮上的处理程序。它是一个提交按钮，因此只需submit在表单的事件中放置任何相关逻辑即可。或者，如果您愿意，可以将调用validate()作为按钮的click.

@user1667191：该validate函数必须是一个全局函数才能与老式 DOM0onXYZ属性一起使用。如果是这样，那将起作用。示例：jsbin.com/ePUgAyo/1 源。但再说一遍：不要把它放在按钮上。把它放在表格上。那是更好的地方。（并且您将需要return并且如果您想阻止根据条件提交表单，请使用validatereturn false。）
2021-04-28 06:09:10
@user1667191：或者更好的是，使用通过addEventListener（或attachEvent在旧版本的 IE 上）附加的现代事件处理程序。
2021-04-29 06:09:10
仍然没有得到对话框。这是我现在的表格：<form name='form-main' method='post'>。这是按钮：<input type='submit' onClick='validate();' value='I accept - Download the GM!'/>。也试过return validate();
2021-05-10 06:09:10
非常感谢TJ！我把它放在 <head> 里面，然后把它移到 <body> 里面，它工作得很好。
2021-05-10 06:09:10

您可以像这样覆盖原始原型“提交”方法：

HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;

HTMLFormElement.prototype.submit = function (){ 
   this._submit(); 
   alert('Deddy Is Great :)'); // or fire the onsubmit event manually
};
您的回答非常好，值得投票。我试过了，它没有任何问题。
2021-04-22 06:09:10

提交按钮的 onclick 事件在表单的 onsubmit 事件之前立即触发，这会阻止后续事件的传播和触发，从而导致验证函数永远不会被触发。您可以看到这是您this.disabled=true;从代码示例中删除的。

根据W3的文档：

禁用的表单控件必须防止在用户交互任务源上排队的任何单击事件在元素上分派。

您应该从提交按钮中删除单击事件代码，并简单地允许该函数执行您需要执行的操作，包括禁用该按钮。例如：

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

jsFiddle 示例

感谢您的示例，将使用此方法禁用按钮。
2021-05-02 06:09:10
其它你可能感兴趣的问题
上一篇使用 grunt uglify 进行 Angularjs 缩小导致 js 错误 下一篇找出某人是否有角色