Home > Web Front-end > JS Tutorial > js form表单onsubmit事件用法详解

js form表单onsubmit事件用法详解

WBOY
Release: 2016-06-01 09:54:53
Original
2408 people have browsed it

onsubmit 属性只在

表单中使用。

onsubmit事件是当表单提交时进行相关js操作的一个事件。

onsubmit 事件会在表单中的确认按钮被点击时发生。当该事件触发的函数中返回false时,表单就不会被提交

请看下面实例:

<code class="language-html"><script>
function submitFun(){
      alert("111");
}
</script>
<form onsubmit="submitFun();">
<input type="text" name="category">
<input type="submit" name="submit" value="提交">
</form>
</code>
Copy after login

上面实例中,当"提交"按钮被点击时,会触发表单的onsubmit事件,此时函数submitFun()被执行(弹出111)并且表单数据也随之提交到服务器。

 

onsubmit经常用于表单验证。请看下面实例。

<code class="language-html"><script>
function submitFun(obj){
      if(obj.category.value==''){
          alert("请输入");
          return false;
      }
}
</script>
<form onsubmit="return submitFun(this);">
<input type="text" name="category">
<input type="submit" name="submit" value="提交">
</form></code>
Copy after login

当"提交"按钮被点击时,依然会执行submitFun()函数,在submitFun()函数中,我们对表单输入框进行了空验证,如果为空,提示输入并return false,这样表单就不会提交(上面已经说到:当该事件触发的函数中返回false时,表单就不会被提交)。 同时,这里要注意onsubmit="return submitFun(this);",不能掉了return,否则表单永远会提交。

本文章中的代码可以复制到这里进行运行,你不妨试一下。

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template