阻止表单的默认提交事件

2020-05-23 16:01:45来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

阻止表单的默认提交事件

表单一点击提交按钮(submit)必然跳转页面,如果表单的action为空也会跳转到自己的页面,即效果为刷新当前页。 
如下,可以看到一点击提交按钮,浏览器的刷新按钮闪了一下:

这里写图片描述

如果想要阻止表单的默认提交事件,有以下几种方法:

  • 1.将<input>标签内按钮类型从type="submit"修改为type="button"
  • 2.表单内的<button>未指定类型时,默认的类型为submit,可以显式的修改为<button type="button">来阻止表单提交
  • 3.利用preventDefault()方法:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function func(event){
            event.preventDefault();
        }
    </script>
</head>
<body>
    <form action="">
        <input type="submit" value="button" οnclick="func(event)" /> 
    </form>
</body>
</html>
  • 4.用onclick点击事件来return false 

讲一下表单提交按钮onclick事件: 
οnclick="return true" 为默认的表单提交事件 
οnclick="return false"为阻止表单提交事件 
而一般用onclick来调用函数都是没有返回值的,所以一般调用完成后为默认return true;所以才会看到,先处理回调函数后再进行表单提交跳转。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function func(){
            return false;
        }
    </script>
</head>
<body>
    <form action="">
        <input type="submit" value="button" οnclick="return func()" /> 
        <!--注意是onclick内是return func();而不是简单的调用func()函数-->
    </form>
</body>
</html>
  • 5.利用表单的onsubmit事件 

注意:onsubmit事件的作用对象为<form>,所以把onsubmit事件加在提交按钮身上是没有效果的。 
form对象的onsubmit事件类似onclick,都是先处理调用的函数,再进行表单是否跳转布尔值的判断 
οnsubmit="return true" 为默认的表单提交事件 
οnsubmit="return false"为阻止表单提交事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function func(){
            return false;
        }
    </script>
</head>
<body>
    <form action="" οnsubmit="return func()">
        <input type="submit" value="button" /> 
    </form>
</body>
</html> 

原文链接:https://www.cnblogs.com/zmdComeOn/p/12941387.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:还在羡慕程序员工资高吗?看完这篇前端学习计划,你也可以拿高薪

下一篇:5.盒模型