javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS表单提交onsubmit事件return

JS表单提交中onsubmit事件return的作用详解

作者:Winn

这篇文章主要为大家介绍了JS表单提交中onsubmit事件return的作用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

JS表单提交中onsubmit事件return的作用

1.html

<!DOCTYPE html>  
<html>  
<head>  
<title>JS表单提交中onsubmit事件return的作用</title>  
</head>  
<body>  
 <form method="post" action="2.html" onsubmit="return Checkname()">  
  <input id="name" type="text" placeholder="请输入你的名字">  
  <button>提交</button>  
 </form>  
 </body>  
 </html>  
 <script type="text/javascript">  
    function Checkname() {  
        var name=document.getElementById('name').value;  
        if (!name) {  
            alert('名字为空');  
            return false;  
        }else{  
            return true;  
        }  
    }  
 </script>

2.html

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>JS表单提交中onsubmit事件return的作用</title>  
 </head>  
 <body>  
    恭喜表单提交成功  
 </body>  
 </html>

代码运行效果图

1.不填写名字

2.填写名字

代码分析

当点击提交按钮(button按钮)的时候,浏览器会自动触发onsubmit事件,执行Checkname()函数。Checkname()函数通过判断名字是否存在,来返回true或者false。

当Checkname()返回false的时候,onsubmit事件可以看成为:

onsubmit="return false"

当Checkname()返回true的时候,onsubmit事件可以看成为:

onsubmit="return true"

重点

此时onsubmit中return的作用就是将Checkname()函数运行返回的结果(true或者false),再向上返回(返回给浏览器)。浏览器如果接收到onsubmit返回的是false,则阻止表单提交。反之,如果接收到的是true,表单就会提交到action属性指向的2.html页面。

以上就是JS表单提交中onsubmit事件return的作用详解的详细内容,更多关于JS表单提交onsubmit事件return的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文