preventDefault()
是一個 JavaScript 函數,用于阻止表單的默認提交行為
以下是如何在表單提交中使用 preventDefault()
的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Submission Example</title>
</head>
<body>
<form id="myForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<button type="submit">Submit</button>
</form>
<script src="script.js"></script>
</body>
</html>
script.js
的 JavaScript 文件,并添加以下代碼:document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('myForm');
form.addEventListener('submit', function (event) {
// Prevent the default form submission behavior
event.preventDefault();
// Get the username value from the input field
const username = document.getElementById('username').value;
// Perform your custom logic here, e.g., send the data to a server, display a message, etc.
alert(`Username submitted: ${username}`);
});
});
在這個示例中,我們首先等待文檔內容加載完成,然后獲取表單元素并為其添加一個 ‘submit’ 事件監聽器。當表單提交時,我們調用 event.preventDefault()
來阻止默認的提交行為。接下來,我們可以執行自定義邏輯,例如發送數據到服務器或顯示一條消息。