.submit()
.submit( handler )
描述:把某个事件处理函数绑定到JavaScript事件“submit”上,或者在某个元素上触发该事件。
- eventData类型:Anything一个对象,它包含了要传递给事件处理函数的数据。
- handler一个函数,在每次事件被触发时执行它。
该签名不接受任何参数。
该方法,在第一种变体中,是.on( "submit", handler )的简写,在第三种变体中,是.trigger( "submit" )的简写。
当用户试图提交一个表单时,submit事件会发送到这个元素上。它只能附加到<form>元素上。既可以通过点击<input type="submit">、<input type="image">或<button type="submit">来提交表单,也可以在某些表单元素获得焦点时,按下Enter来提交表单。
根据不同的浏览器,Enter键只会导致提交一个表单,如果表单恰好有一个文本字段,或者当表单里有一个提交按钮时。这个接口不该依赖于针对这个键的一个特定行为,除非已经使用了keypress事件来监听Enter键的按下。
举个例子,设想下面的HTML:
<form id="target" action="destination.html"> <input type="text" value="Hello there"> <input type="submit" value="Go"> </form> <div id="other"> Trigger the handler </div>
该事件处理函数可以绑定到表单上。
$( "#target" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
现在,在提交表单的时候,会跳出提醒消息。这发生在实际提交前面,所以我们可以通过在事件对外上调用.preventDefault(),或者在我们的处理函数中返回false来取消提交操作。当别的元素被点击时,我们可以人为触发该事件。
$( "#other" ).click(function() {
$( "#target" ).submit();
});
在执行代码之后,点击“Trigger the handler”也将显示这条消息。另外,将会引发表单上默认的submit操作,所以会提交表单。
JavaScript事件submit不会有Internet Explorer中冒泡。然而,自从jQuery 1.4,依赖于submit事件的事件委托的脚本,依然会跨浏览器一致地起作用,因为jQuery规范化了该事件的行为。
其它说明
- 因为
.submit()方法是.on( "submit", handler )的简写,所以可以用.off( "submit" )来分离。 - 表单和它的子元素不能使用与一个表单属性相冲突的name或者id。名称冲突可能导致混乱错误。要想得到一个规则的完整列表,并针对这些问题检查你的标记,参见DOMLint。
示例
如果你想防止表单被提交,除非设置了一个标识变量,试一试:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>submit demo</title>
<style>
p {
margin: 0;
color: blue;
}
div,p {
margin-left: 10px;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Type 'correct' to validate.</p>
<form action="javascript:alert( 'success!' );">
<div>
<input type="text">
<input type="submit">
</div>
</form>
<span></span>
<script>
$( "form" ).submit(function( event ) {
if ( $( "input:first" ).val() === "correct" ) {
$( "span" ).text( "Validated..." ).show();
return;
}
$( "span" ).text( "Not valid!" ).show().fadeOut( 1000 );
event.preventDefault();
});
</script>
</body>
</html>
演示结果
如果你想防止表单被提交,除非设置了一个标识变量,试一试:
$( "form" ).submit(function() {
return this.some_flag_variable;
});
在网页的第一个表单上触发提交事件,试一试:
$( "form:first" ).submit();