資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何使用 JavaScript 阻止表單提交？
在本教程中，我們將瞭解使用 JavaScript 阻止表單提交的方法。通常，如果我們嘗試使用某些事件執行某些操作，HTML 表單 預設情況下會自動提交。表單的自動提交會導致瀏覽器重新整理並重新載入整個頁面，這在某些情況下我們不希望發生。因此，為了在提交之前執行任何操作，我們需要更改表單的預設行為以防止其提交。
以下是我們可以用來阻止表單提交的方法：
使用“return false”值
使用 preventDefault() 方法
讓我們逐一討論它們以及程式碼示例。
使用“return false”值
我們可以透過為 onsubmit 事件賦予 "return false;" 值來阻止表單提交。為事件賦予此值使表單不返回任何內容，並防止其提交以及重新整理瀏覽器。
語法
以下是使用 return false 值阻止表單提交的語法：
<form onsubmit="return false;"> //content of form tag </form>
演算法
步驟 1 - 在第一步中，我們將在 HTML 文件中定義一個表單標籤，併為其提供一個帶有 return false; 值的 onsubmit 事件，如上述語法所示。
步驟 2 - 在下一步中，我們可以定義我們在表單提交之前要執行的操作。
步驟 3 - 在第三步中，我們將向用戶證明表單未提交，方法是在不重新整理瀏覽器的情況下更新某些文字。
示例
下面的示例將說明 onsubmit 事件和 return "false" 值的使用：
<!DOCTYPE html>
<html>
<body>
<h3>Stop form submission using JavaScript?</h3>
<form onsubmit="return false;">
<input type="text">
<p id="result">Button is not clicked yet!!</p>
<button onclick="display()">Change above text</button>
</form>
<script>
function display() {
let result = document.getElementById("result");
result.innerHTML = "<b>The button is clicked and form is not submitted yet.</b>"
}
</script>
</body>
</html>
在這個例子中，我們透過按下按鈕來更改按鈕上方的文字，以向用戶顯示在表單提交前執行某些操作時，既沒有提交表單，也沒有重新整理瀏覽器。
使用 preventDefault() 方法
在 JavaScript 中，我們提供了一個內建的 preventDefault() 方法，用於停止表單提交，並防止瀏覽器在執行某些任務時自行重新整理。
我們可以使用 preventDefault() 方法來阻止表單提交，方法有兩種：
將其作為 onsubmit 事件的值。
在事件的回撥函式內使用它。
讓我們詳細瞭解兩者。
將其作為 onsubmit 事件的值
我們可以將 event.preventDefault() 方法作為 onsubmit 事件的值傳遞，就像我們在之前的方法中那樣，我們將 return false; 作為它的值傳遞。
語法
以下語法用於為 onsubmit 事件賦值 event.preventDefault：
<form onsubmit="event.preventDefault();"> //content of the form tag </form>
讓我們透過程式示例來了解其實際實現。
注意− 此方法和上述方法的演算法幾乎相同。你只需要將前面示例中 onsubmit 事件的值從 "return false" 更改為 event.preventDefault();。
示例
以下程式碼是我們上面討論的方法（即 event.preventDefault() 方法）的實際實現：
<!DOCTYPE html>
<html>
<body>
<h3>Stop form submission using JavaScript? </h3>
<form onsubmit="event.preventDefault();">
<input type="text">
<p id="result">Button is not clicked yet!!</p>
<button onclick="display()">Change above text</button>
</form>
<script>
function display() {
let result = document.getElementById("result");
result.innerHTML = "<b>The form is secured from submission using the preventDefault() method.</b>"
}
</script>
</body>
</html>
在上面的示例中，我們將 event.preventDefault() 作為 onsubmit 事件的值傳遞，該事件負責阻止表單提交以及瀏覽器重新整理。
在回撥函式中使用 event.preventDefault()
在這種方法中，我們不需要使用 onsubmit 事件，而可以在我們希望在表單提交之前啟用的事件的回撥函式中使用 preventDefault() 方法。
語法
以下語法顯示瞭如何在回撥函式中使用 prventDefault()：
function callback(event){
event.preventDefault()
}
演算法
步驟 1 - 第一步涉及在 HTML 文件中定義表單標籤和其他必需項。
步驟 2 - 在這一步中，我們將為事件定義回撥函式，並在其中使用 event.preventDefault，如上述語法所示。
步驟 3 - 在第三步中，我們只需將函式分配給事件，該事件會在觸發時呼叫該函式。
讓我們透過程式示例來了解它。
示例
以下程式碼將解釋如何在事件的回撥函式中使用 preventDefault()：
<!DOCTYPE html>
<html>
<body>
<h3>Stop form submission using JavaScript?</h3>
<form>
<input type="text">
<p id="result">Button is not clicked yet!!</p>
<button onclick="display()">Change above text</button>
</form>
<script>
function display() {
event.preventDefault();
let result = document.getElementById("result");
result.innerHTML = "<b>The form is secured from submission using the preventDefault() method inside callback function.</b>"
}
</script>
</body>
</html>
在這個例子中，我們定義了 display() 函式，並在其中使用了 event.preventDefault()，它可以防止瀏覽器重新整理和表單提交。定義函式後，我們將其分配給與按鈕標籤關聯的 onclick 事件，該事件透過按下按鈕觸發事件，並同時呼叫該函式。
在本教程中，我們學習了使用 JavaScript 阻止表單提交的方法，並透過程式碼示例瞭解了所有這些方法，這些示例展示了這些方法的使用，並證明了在表單提交之前執行了這些操作。
55K+ 次瀏覽
