在 JS 中获取表单数据 - Javascript

在编写 Web 应用程序时，处理用户输入是一项重要的任务。表单是收集用户输入数据的主要方式。在此文章中，我们将学习如何使用 Javascript 获取 HTML 表单数据。

获取表单元素

在 Javascript 中，我们可以使用 document.getElementById 方法来获取表单元素。例如，我们想获取一个表单元素具有 id="name" 属性值的 input 元素，我们可以使用如下代码：

const nameInput = document.getElementById("name");

获取表单值

有了表单元素的引用，我们可以通过访问该元素的 value 属性来获取表单元素的值。例如，我们要获取名字输入框的值，可以使用以下代码：

const nameInput = document.getElementById("name");
const name = nameInput.value;

这将把名字输入框的值赋给 name 变量。

表单提交

通常，当用户在表单中填写信息后，我们需要将表单数据提交到服务器进行处理。要做到这一点，我们需要侦听表单的 submit 事件，然后处理表单数据。以下是提交表单的基本方法：

const form = document.getElementById("myForm");
form.addEventListener("submit", (event) => {
   event.preventDefault(); // 阻止表单提交以及页面重载
   // 处理表单数据的代码
});

获取所有表单元素的值

有时候我们需要获取所有表单元素的值，而不是单个元素的值。为了实现这个目标，我们可以遍历表单的所有元素，并获取每个元素的值。

const form = document.getElementById("myForm");
const formData = {};

for (let element of form.elements) {
    if (element.tagName === "INPUT" && element.type !== "submit") {
        formData[element.name] = element.value;
    }
}

首先，我们创建名为 formData 的空对象来存储表单数据。然后，我们遍历表单的所有元素，检查它们是否是 input 类型，以及是否具有名字属性。如果条件为真，我们将元素的名称和值存储在 formData 对象中。

结论

在本文中，我们学习了如何使用 Javascript 获取 HTML 表单数据。我们使用 document.getElementById 方法获取表单元素，并使用 value 属性获取元素的值。我们还简要介绍了如何捕获和处理表单提交事件，并展示了如何获取表单中所有元素的值。