如何用 JavaScript 提交一个表单
原文： How to Submit a Form with JavaScript – JS Submit Button Example
在互联网上创建应用程序和网站时，你有时需要你的用户通过填写表格来提供信息。
但是，你可能会想——如何从表单中获取这些数据？你可以用 JavaScript 来做这个。
在这篇文章中，你将学习如何用 JavaScript 创建一个表单，并在提交表单时从其中获取数据。
这篇文章不会涉及如何将数据输入数据库——它只涉及如何提交表单。但是你应该知道，一旦你有了这些数据，你就可以把它发送到你选择的数据库中，用它来操作信息，以及更多。
要使用 JavaScript 提交一个表单，你必须首先创建表单，并为输入字段添加独特的、特定的属性。当用户提交时，你将使用这些属性来检索数据，然后调用一个函数来处理验证（可能是在提交任何数据的情况下）。
如何创建 HTML 表单首先，让我们创建一个有两个字段的基本 HTML 表单：username 和 password。我们还将添加一个按钮，用来提交表单并触发一个 JavaScript 动作。
为了通过 JavaScript 获得这个表单的数据，你需要给表单输入字段和表单本身附加特定属性。这些属性可以是一个 id，一个 class，甚至是具有 name 标签。这将有助于在 JavaScript 中使用其文档方法获得数据。
例如，如果你在输入字段上使用一个 id 属性，你可以使用文档方法 getElementByID('idName') 访问输入字段的数据和其他值：
// HTML
// JS
let myUsername = document.getElementById('username');
console.log(myUsername);
如果你使用一个 class 属性，你将使用 getElementsByClassName(className)，它返回一个所有具有该 className 的元素的数组。如果它只有一个元素，你可以使用索引号 0 来访问它的数据：
// HTML
// JS
let myUsername = document.getElementsByClassName('username');
console.log(myUsername[0]);
如果你使用 name 属性，你将使用 getElementsByName(name)。这与 class 属性的运行方式类似，它也会返回一个数组，你可以通过它的索引号来遍历或访问数组：
// HTML
// JS
let myUsername = document.getElementsByName('username');
console.log(myUsername[0]);
注意：这将不会返回输入值，而是返回输入元素本身。
如何用 JavaScript 提交一个表单第一步是给表单附加你喜欢的属性，你可以用它来跟踪表单的提交时间。这可以是一个 id、class 或 name 属性，但在本文中，我将对表单和输入字段使用 id：
你现在可以用 JavaScript 处理表单提交。你首先用你的首选属性（可以是一个 id）获取表单，并将其存储在一个变量中：
let loginForm = document.getElementById("loginForm");
然后你可以将 addEventListener 附加到表单变量上并监听提交事件。这个事件监听器允许你附加一个回调函数，一旦表单被提交就会被触发：
loginForm.addEventListener("submit", (e) => {
e.preventDefault();
// 处理提交
});
你现在可以获得表单数据并处理任何你希望的操作。在这篇文章中，让我们首先验证数据，在执行任何操作之前检查输入是否为空：
loginForm.addEventListener("submit", (e) => {
e.preventDefault();
let username = document.getElementById("username");
let password = document.getElementById("password");
if (username.value == "" || password.value == "") {
// 抛出错误
} else {
// 用表单输入执行操作
}
});
这就是全部的 JavaScript 代码：
let loginForm = document.getElementById("loginForm");
loginForm.addEventListener("submit", (e) => {
e.preventDefault();
let username = document.getElementById("username");
let password = document.getElementById("password");
if (username.value == "" || password.value == "") {
alert("Ensure you input a value in both fields!");
} else {
// 用表单输入进行操作
alert("This form has been successfully submitted!");
console.log(
`This form has a username of ${username.value} and password of ${password.value}`
);
username.value = "";
password.value = "";
}
});
总结在这篇文章中，你已经学会了如何用 JavaScript 提交一个表单，以及它是如何与各种 DOM 方法一起工作的。
你还可以用其他方法，但这是用 JavaScript 处理提交的一种直接方法。
你可以通过访问我的网站获取我的 150 多篇文章。你也可以使用搜索栏来查看我是否写过特定的文章。