在前端开发中,获取表单的 onSubmit 事件通常是通过监听表单的 "submit" 事件来实现的。以下是一个简单的示例,展示了如何在 HTML 和 JavaScript 中实现此功能:
<form id="myForm">
<input type="text" name="username" placeholder="用户名" />
<input type="password" name="password" placeholder="密码" />
<button type="submit">提交</button>
</form>
const form = document.getElementById("myForm");
form.addEventListener("submit", (event) => {
// 阻止表单的默认提交行为
event.preventDefault();
// 获取表单数据
const formData = new FormData(form);
// 处理表单数据
console.log("用户名:", formData.get("username"));
console.log("密码:", formData.get("password"));
// 在此处执行其他操作,例如发送数据到服务器
});
在这个示例中,我们首先通过 document.getElementById
获取表单元素,然后使用 addEventListener
方法监听表单的 "submit" 事件。在事件处理程序中,我们使用 event.preventDefault()
阻止表单的默认提交行为,然后使用 FormData
对象获取表单数据,并在控制台中输出数据。您可以根据需要执行其他操作,例如将数据发送到服务器。
领取专属 10元无门槛券
手把手带您无忧上云