如何阻止表單的預設提交事件

阿新 • • 發佈：2019-01-26

表單一點選提交按鈕(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" onclick="func(event)" /> 
    </form>
</body>
</html>

4..用onclick點選事件來return false
講一下表單提交按鈕onclick事件：
onclick="return true" 為預設的表單提交事件
onclick="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,都是先處理呼叫的函式，再進行表單是否跳轉布林值的判斷
onsubmit="return true" 為預設的表單提交事件
onsubmit="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>

如何阻止表單的預設提交事件

js阻止表單預設提交併重新整理頁面

ajax提交表單時阻止表單自動提交

如何防止表單預設提交跳轉

Validation阻止表單自動提交，使用Ajax提交表單（使用Validation的submitHandler方法）

如何阻止表單的預設提交事件

阻止表單提交的預設行為 return false

JavaScript基礎 submit按鈕結合onclick事件實現表單的提交與驗證

表單的提交onsubmit事件

Js 阻止表單提交方法

js阻止表單提交的兩種方法

阻止表單提交刷新頁面的問題

js阻止表單默認提交並刷新頁面

form表單可以提交，阻止頁面跳轉

S實現表單內容驗證、阻止表單提交（onsubmit）

提交表單資料或阻止表單資料的提交(使用者輸入的資料不合法)

jquery、js阻止表單提交的不同方法

阻止表單提交按鈕多次提交

jQuery 阻止表單提交

關於form提交表單和onclick事件的觸發

JS實現表單內容驗證、阻止表單提交（onsubmit）

如何阻止表單的預設提交事件

相關推薦