onsubmit 事件

事件对象

当表单提交时执行 JavaScript:

<p>当提交表单是，触发函数并弹出提示信息。</p>
<form action="/plays/html-form-submit" onsubmit="myFunction()">
  输入名字: <input type="text" name="fname">
  <input type="submit" value="提交">
</form>
<script>
  function myFunction() {
    alert("表单已提交");
  }
</script>

尝试一下 »

---

定义和用法 and Usage

onsubmit 事件在表单提交时触发。

---

浏览器支持

事件
onsubmit	Yes	Yes	Yes	Yes	Yes

---

语法

HTML 中:

<element onsubmit="myScript">

<p>该实例演示了如何向表单元素添加 "onsubmit" 事件。</p>
<p>当提交表单是，触发函数并弹出提示信息。</p>
<form action="/plays/html-form-submit" onsubmit="myFunction()">
  输入名字: <input type="text" name="fname">
  <input type="submit" value="提交">
</form>
<script>
  function myFunction() {
    alert("表单已提交");
  }
</script>

尝试一下 »

JavaScript 中:

object.onsubmit = function() {
  myScript
};

<p>该实例演示了如何使用 HTML DOM 向表单元素添加 "onsubmit" 事件。</p>
<p>当提交表单是，触发函数并弹出提示信息。</p>
<form id="myForm" action="/plays/html-form-submit">
  输入名字: <input type="text" name="fname">
  <input type="submit" value="提交">
</form>
<script>
  document.getElementById("myForm").onsubmit = function() {
    myFunction()
  };

  function myFunction() {
    alert("表单已提交");
  }
</script>

尝试一下 »

JavaScript 中, 使用 addEventListener() 方法:

object.addEventListener("submit", myScript);

<p>该实例演示了如何使用 addEventListener() 方法向表单元素添加 "onsubmit" 事件。</p>
<p>当提交表单是，触发函数并弹出提示信息。</p>
<form id="myForm" action="/plays/html-form-submit">
  输入名字: <input type="text" name="fname">
  <input type="submit" value="提交">
</form>
<script>
  document.getElementById("myForm").addEventListener("submit", myFunction);

  function myFunction() {
    alert("表单已提交");
  }
</script>

尝试一下 »

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

---

Technical Details

技术细节

是否支持冒泡:	Yes
是否可以取消:	No
事件类型:	Event
支持的 HTML 标签:	<form>, <keygen>

---

事件对象