当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

JQuery .submit()用法及代码示例


用法 
.submit( handler ) => jQuery

说明：将事件处理程序绑定到 "submit" JavaScript 事件，或在元素上触发该事件。

  • 添加的版本：1.0.submit( handler )

    • handler
      类型：Function(Event eventObject)
      每次触发事件时执行的函数。

  • 添加的版本：1.4.3.submit( [eventData ], handler )

    • eventData
      类型：Anything
      包含将传递给事件处理程序的数据的对象。
    • handler
      类型：Function(Event eventObject)
      每次触发事件时执行的函数。

  • 添加的版本：1.0.submit()

    • 此签名不接受任何参数。

此方法是第一个变体中.on( "submit", handler ) 和第三个变体中.trigger( "submit" ) 的快捷方式。

submit当用户尝试提交表单时，事件被发送到元素。它只能附加到<form>元素。可以通过单击显式提交表单<input type="submit">,<input type="image">， 或者<button type="submit">，或按进入当某些表单元素具有焦点时。

根据浏览器的不同，如果表单只有一个文本字段，或者只有当存在提交按钮时，Enter 键可能只会导致表单提交。接口不应依赖此键的特定行为，除非问题是通过观察按下 Enter 键的 keypress 事件来强制执行的。

例如，考虑 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();
});

这段代码执行后，点击触发处理程序也会显示消息。此外，默认submit表单上的操作将被触发，因此表单将被提交。

JavaScript submit 事件不会在 Internet Explorer 中冒泡。但是，从 jQuery 1.4 开始，依赖于 submit 事件的事件委托的脚本将在浏览器中始终如一地工作，这已经规范了事件的行为。

其他注意事项：

  • 由于 .submit() 方法只是 .on( "submit", handler ) 的简写，因此可以使用 .off( "submit" ) 进行分离。
  • 表单及其子元素不应使用与表单属性冲突的输入名称或 ID，例如 submit 、 length 或 method 。名称冲突可能会导致令人困惑的失败。有关规则的完整列表并检查这些问题的标记，请参阅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-3.5.0.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();

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 .submit()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。