阻止表單的默認提交事件


表單一點擊提交按鈕(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"為阻止表單提交事件

廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com

<!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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM