如何防止表單預設提交 跳轉
阿新 • • 發佈：2019-01-04
<div class="markdown_views">
<p>表單一點選提交按鈕(submit)必然跳轉頁面，如果表單的action為空也會跳轉到自己的頁面，即效果為重新整理當前頁。 <br>
如下，可以看到一點選提交按鈕，瀏覽器的重新整理按鈕閃了一下：
如果想要阻止表單的預設提交事件，有以下幾種方法：
1.將<input>標籤內按鈕型別從type="submit"修改為type="button"
2.表單內的<button>
<button type="button">來阻止表單提交
3.利用preventDefault()方法：
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<script>functionfunc(event){
event.preventDefault();
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
4..用onclick點選事件來return false
講一下表單提交按鈕onclick事件：
onclick="return true" 為預設的表單提交事件
onclick="return false"
而一般用onclick來呼叫函式都是沒有返回值的，所以一般呼叫完成後為預設return true;所以才會看到，先處理回撥函式後再進行表單提交跳轉。
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<script>functionfunc(){returnfalse;
}
</script>
</head>
<body>
<formaction="">
<inputtype="submit"value="button"onclick="return func()" />
<!--注意是onclick內是return func();而不是簡單的呼叫func()函式-->
</form>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
5.利用表單的onsubmit事件
注意：onsubmit事件的作用物件為<form>，所以把onsubmit事件加在提交按鈕身上是沒有效果的。
form物件的onsubmit事件類似onclick,都是先處理呼叫的函式，再進行表單是否跳轉布林值的判斷
onsubmit="return true" 為預設的表單提交事件
onsubmit="return false"為阻止表單提交事件
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<script>functionfunc(){returnfalse;
}
</script>
</head>
<body>
<formaction=""onsubmit="return func()">
<inputtype="submit"value="button" />
</form>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17