在表单提交中怎样运用preventDefault

preventDefault

小樊

2024-09-02 21:45:45

栏目: 编程语言

preventDefault() 是一个 JavaScript 函数，用于阻止表单的默认提交行为

以下是如何在表单提交中使用 preventDefault() 的示例：

首先，创建一个包含表单的 HTML 文件：

<!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() 来阻止默认的提交行为。接下来，我们可以执行自定义逻辑，例如发送数据到服务器或显示一条消息。

在表单提交中怎样运用preventDefault

最新问答

相关标签