阻止表單的預設提交事件

来源:https://www.cnblogs.com/zmdComeOn/archive/2020/05/23/12941387.html
-Advertisement-
Play Games

表單一點擊提交按鈕(submit)必然跳轉頁面,如果表單的action為空也會跳轉到自己的頁面,即效果為刷新當前頁。 如下,可以看到一點擊提交按鈕,瀏覽器的刷新按鈕閃了一下: 如果想要阻止表單的預設提交事件,有以下幾種方法: 1.將<input>標簽內按鈕類型從type="submit"修改為typ ...


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

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

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 今天終於把樸靈老師寫的《深入淺出Node.js》給學習完了, 這本書不是一本簡單的Node入門書籍,它沒有停留在Node介紹或者框架、庫的使用層面上,而是從不同的視角來揭示Node自己內在的特點和結構。建議有一定Node基礎或者做過Node方面的小項目的同學閱讀,看完以後你的思維會有很奇特的碰撞,我 ...
  • 現在這個社會是信息爆炸的社會,各個網站、app上鋪天蓋地的都是各種新聞和信息。 為了獲取信息,我們每天都要進行各種麻煩的操作,打開各種網站或者手機app,操作顯得低效,後來發現了一個神器,那就是RSS。 什麼是RSS RSS中文名是簡易信息聚合,就是讓網站一個按照一定周期更新網站的文章概要內容(有些 ...
  • 今天小編要跟大家分享的文章是關於想要學習web前端需要掌握哪些技能和工具?互聯網的快速發展和激烈競爭,使得用戶體驗成為一個重要的關註點,導致專業前端工程師成為熱門職業,各大公司對前端工程師的需求量都很大,要求也越來越高,優秀的前端工程師更是稀缺。因此想要學習前端技術的人越來越多,那麼零基礎學習web ...
  • 前端開發因為其上手快,開發難度適中,而應用非常廣泛,成為目前大部分想進入IT行業的年輕人的首選。目前前端開發崗位人員主要分類三類:高校畢業生,培訓生,自學人士三大類。今天主要和大家一起來探討一下,自學前端需要掌握哪些知識點。 ...
  • Ajax 非同步 JavaScript 和 XML 第一步: 創建 XMLHttpRequest 對象,var 對象名 = new XMLHttpRequest(); Xmlhttprequest 對象用來和伺服器交換數據 第二步: XMLHttpRequest 對象的 open()和 send()方 ...
  • JavaScript箭頭函數 語法 基礎語法 高級語法 描述 引入箭頭函數有兩個方面的作用:更簡短的函數並且不綁定 this 。 更短的函數 不綁定 this 在箭頭函數出現之前,每個新定義的函數都有它自己的 this 值(在構造函數的情況下是一個新對象,在嚴格模式的函數調用中為underfined ...
  • 前言 文章只記錄理解以及容易遺忘的知識點。 詞法作用域、塊作用域 詞法作用域 詞法作用域:簡單的說,詞法作用域就是定義在詞法階段的作用域。換句話說,詞法作用域就是在你寫代碼時將變數和塊作用域寫在哪裡來決定的,因此在詞法分析器處理代碼時會保持作用域不變(大部分情況是這樣的)。 當然有一些欺騙詞法作用域 ...
  • # 5.盒模型 - box-sizing:content-box | border-box; 預設content-box 一個盒模型的功能強弱,直接決定了佈局是否簡潔,決定了編程的複雜度。 正常盒子: boxWidth = width + border*2 + padding*2; IE6混雜模式的 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...