.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();