如何阻止表单的默认提交事件

最新推荐文章于 2024-08-29 10:03:37 发布

赶路人儿

最新推荐文章于 2024-08-29 10:03:37 发布

阅读量8.3k

点赞数 2

分类专栏： web前端

本文链接：https://blog.csdn.net/liuxiao723846/article/details/106818769

版权

web前端专栏收录该内容

294 篇文章 13 订阅

订阅专栏

当使用bootstrap框架开发前端界面时，有的时候我们做一个table表头的查询框，需要引入一大堆div和from，否则界面的样式就比较丑。如下：

<div class="container">
 <div class="row">
  <div class="table-responsive">
   <div id="toolbar">
    <form class="form-inline">
     <div class="form-group">
     <label class="sr-only" for="product_line">产品线</label>
     <div class="input-group">
      <div class="input-group-addon">产品线</div>
      <select class="form-control" name="product_line" id="productLine">
       <option value="">请选择产品线...</option>
      </select>
     </div>
     </div>
     <button type="button" class="btn btn-primary queryButton">查询</button>
    </form>
   </div>
   <table id="table" ></table>
  </div>
 </div>
</div>

当点击button时，本来要更新下面table的数据，但由于上面有一个form表单，所以，最后会默认触发提交表单的动作，造成页面的刷新。例如下面这个

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

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" onclick="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" onclick="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="" onsubmit="return func()">
        <input type="submit" value="button" /> 
    </form>
</body>
</html>