如何在 javascript 中收听表单提交事件？

小开

使用 jQuery:

$('form').submit(function () {
// Validate here


if (pass)
return true;
else
return false;
});

小开

为什么人们总是在不需要的时候使用 jQuery？
为什么人们不能使用简单的 JavaScript 呢？

var ele = /*Your Form Element*/;
if(ele.addEventListener){
ele.addEventListener("submit", callback, false);  //Modern browsers
}else if(ele.attachEvent){
ele.attachEvent('onsubmit', callback);            //Old IE
}

callback 是您希望在提交表单时调用的函数。

关于 EventTarget.addEventListener，看看关于 MDN 的文档。

要取消本机 submit事件(防止提交表单) ，请在回调函数中使用 .preventDefault(),

document.querySelector("#myForm").addEventListener("submit", function(e){
if(!isValid){
e.preventDefault();    //stop form from submitting
}
});

使用库侦听 `submit`事件

如果出于某种原因，你决定使用一个库(你已经在使用一个库，或者你不想处理跨浏览器的问题) ，这里有一些方法来监听公共库中的提交事件:

JQuery
```
$(ele).submit(callback);
```
其中 ele是表单元素引用，callback是回调函数引用

    <iframe width="100%" height="100%" src="http://jsfiddle.net/DerekL/wnbo1hq0/show" frameborder="0"></iframe>

AngularJS (1.x)
```
<form ng-submit="callback()">


$scope.callback = function(){ /*...*/ };
```
非常简单，其中 $scope是控制器中框架提供的作用域。参考文献

做出反应

<form onSubmit={this.handleSubmit}>


class YourComponent extends Component {
// stuff


handleSubmit(event) {
// do whatever you need here


// if you need to stop the submit event and
// perform/dispatch your own actions
event.preventDefault();
}


// more stuff
}

只需将一个处理程序传递给 onSubmit道具

其他框架/库

请参考框架的文档。

确认

您总是可以用 JavaScript 进行验证，但是对于 HTML5，我们也可以进行本地验证。

<!-- Must be a 5 digit number -->
<input type="number" required pattern="\d{5}">

您甚至不需要任何 JavaScript! 无论何时不支持本机验证，您都可以回退到 JavaScript 验证器。

演示: http://jsfiddle.net/DerekL/L23wmo1L/

小开

根据您的需求，您也可以在不使用 jQuery 这样的库的情况下完成以下工作:

把这个加到你的头上:

window.onload = function () {
document.getElementById("frmSubmit").onsubmit = function onSubmit(form) {
var isValid = true;
//validate your elems here
isValid = false;


if (!isValid) {
alert("Please check your fields!");
return false;
}
else {
//you are good to go
return true;
}
}
}

你的形式可能看起来还是这样:

    <form id="frmSubmit" action="/Submit">
<input type="submit" value="Submit" />
</form>

小开

这是在发生 onSubmit时调用自己的 javascript 函数的最简单方法。

超文本标示语言

<form>
<input type="text" name="name">
<input type="submit" name="submit">
</form>

JavaScript

window.onload = function() {
var form = document.querySelector("form");
form.onsubmit = submitted.bind(form);
}


function submitted(event) {
event.preventDefault();
}

小开

如果你有多个表格在同一页，你想 处理不使用 Id 的提交事件监听器

JQuery

$('form').submit(function (event) {
targetObj = event.target;
// do your logic
});

纯 JavaScript 技巧

上传只要做下面的方式。

for(var i=0; i<document.forms.length; i++){
var form = document.forms[i];
form.addEventListener("submit", myListener,false);
}

使用 JavaScript 的多表单提交事件侦听器处理归入 Jan Pfeifer 对 StackOverflow 社区的回答

我希望这对某人有所帮助

如何在 javascript 中收听表单提交事件？

使用库侦听 submit事件

确认

使用库侦听 `submit`事件