防止表單提交時刷新頁面-阻止form表單的默認提交行為


最近在寫 ajax 提交的時候遇到一個問題,在執行 ajax 提交之后,瀏覽器頁面自動刷新了,主要是沒有 由於form 表單的默認提交行為。一下是幾種阻止 form 表單默認提交行為的方式。

1.使用button 按鈕提交表單的時候,要設置type="button" button在瀏覽器中默認的類型為submit;


2.使用input 代替button ,設置type="button"


3.event.preventDefault(); 在提交事件綁定的方法的最后 使用event.preventDefault();方法;


4.用onclick點擊事件來return false

講一下表單提交按鈕onclick事件:

onclick="return true" ;默認的表單提交事件
onclick="return false";阻止表單提交事件

只需要在onlick 綁定的方法func最后添加return false; 標簽中的onclick 屬性要寫成 onclick="return func();" 一定要加return;

 

5.利用表單的onsubmit事件
注意:onsubmit事件的作用對象為<form>,所以把onsubmit事件加在提交按鈕身上是沒有效果的。
form對象的onsubmit事件類似onclick,都是先處理調用的函數,再進行表單是否跳轉布爾值的判斷
onsubmit="return true" 為默認的表單提交事件
onsubmit="return false"為阻止表單提交事件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script>
 7         function func(){
 8             return false;
 9         }
10     </script>
11 </head>
12 <body>
13     <form action="" onsubmit="return func()">
14         <input type="submit" value="button" /> 
15     </form>
16 </body>
17 </html>

 


免責聲明!

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



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