資料結構
網路
關係資料庫管理系統(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文件中定義一個表單標籤，並賦予它一個onsubmit事件，其值為return false;，如上述語法所示。
步驟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;作為其值傳遞一樣。
語法
以下語法用於將event.preventDefault值賦予onsubmit事件：
<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+ 次瀏覽
