您的位置:首页> 前端教程> JS教程
文章导航

JavaScript submit 事件

2018-11-6 10:47| 作者: admin| 查看: 2740| 评论: 0|来自: 蚂蚁部落

表单中提交按钮被点击会触发submit事件。

关于事件处理函数注册,可以参阅如何注册事件处理函数一章节。

由于表单提交是最为频繁的页面操作之一,且submit事件有一些细节需要特别注意。

下面将通过代码实例进行一下详细介绍。

浏览器支持:

(1).IE浏览器支持此事件。

(2).edge浏览器支持此事件。

(3).火狐浏览器支持此事件。

(4).Opera浏览器支持此事件。

(5).谷歌浏览器支持此事件。

(6).safria浏览器支持此事件。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript">
window.onload = function () {
  let subT=document.getElementById("subt");
  subT.onclick=function(){
    console.log("click事件触发");
    return false;
  }
  subT.onsubmit=function(){
    console.log("submit事件触发");
  }
}
</script>
</head>
<body>
<form action="#" method="post">
  <input type="submit" id="subt" value="提交表单"/>
</form>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/06/104830h5uj26uuu60jmmyy.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

点击submit按钮会有表单提交动作,所以很多朋友想当然认为submit事件是发生在按钮自身智商。

其实这是错误的,点击提交按钮,在按钮自身触发的是click事件。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript">
window.onload = function () {
  let subT=document.getElementById("subt");
  let myform = document.forms[0];
  subT.onclick=function(){
    console.log("click事件触发");
  }
  myform.onsubmit=function(){
    console.log("submit事件触发");
    return false
  }
}
</script>
</head>
<body>
<form action="#" method="post">
  <input type="submit" id="subt" value="提交表单"/>
</form>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/06/104904d0p9208x5x5w88in.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

点击submit按钮之后,按钮自身会触发click事件。

同时会触发form表单元素上的submit事件,于是就出现表单提交动作。

上述代码之所以没有出现表单提交动作,是因为事件处理函数返回值为false。

关于return false的功能可以参阅JavaScript return false一章节。

点击submit按钮默认会提交表单,点击图片按钮具有同样效果。

更多内容可以参阅HTML input image按钮一章节。

下面是一段完整简单表单验证代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript">
function checkForm(form) {
  if(form.username.value == "") {
    alert("用户名不能为空");
    form.username.focus();
    return false;
  }
  if(form.password.value == "") {
    alert("密码不能为空");
    form.password.focus();
    return false;
  }
  return true;
}
window.onload = function () {
  let myform = document.forms[0];
  myform.onsubmit = function () {
    return checkForm(this);
  }
}
</script>
</head>
<body>
<form action="#" method="post">
  姓名:<input type="text" name="username"/><br/>
  密码:<input type="password" name="password"/><br/>
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

点击提交按钮可以进行简单的表单验证功能,简单做一下分析:

(1).点击提交按钮会触发form表单submit事件,进而执行事件处理函数。

(2).事件处理函数可以对表单值进行简单的是否为空判断,如果为空,那么表示验证失败。

(2).当表单验证失败,事件处理函数会返回false,阻止表单的提交动作,否则无论是否成功,表单都会提交。

关于return false的功能可以参阅JavaScript return false一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部