使用 JavaScript 从表单收集数据并存储到变量中-html教程-PHP中文网

使用 JavaScript 从表单收集数据并存储到变量中

聖光之護

发布： 2025-08-25 20:50:18

原创

162人浏览过

使用 javascript 从表单收集数据并存储到变量中

本文将介绍如何使用 JavaScript 的 FormData 对象，高效地从 HTML 表单中收集数据，并将其存储到变量中以便后续使用。通过示例代码和详细解释，您将学会如何简化表单数据处理流程，避免繁琐的单个元素选择和赋值操作。

使用 FormData 对象收集表单数据

JavaScript 的 FormData 对象提供了一种便捷的方式来表示 HTML 表单中的数据。它可以轻松地收集表单中所有字段的值，并以键值对的形式存储。

首先，你需要获取表单元素的引用。可以使用 document.querySelector() 或其他 DOM 选择器来实现：

const form = document.querySelector('form');

登录后复制

然后，创建一个 FormData 对象，并将表单元素作为参数传递给它：

立即学习“Java免费学习笔记（深入）”；

const formData = new FormData(form);

登录后复制

现在，formData 对象包含了表单中所有字段的数据。

将 FormData 存储到变量并使用

FormData 对象本身不是一个可以直接访问的键值对集合。你需要遍历它，并将数据存储到你想要的变量中。以下是一些常用的方法：

1. 使用 entries() 方法迭代 FormData 对象：

entries() 方法返回一个迭代器，允许你遍历 FormData 对象中的所有键值对。

const data = {};
for (const [key, value] of formData.entries()) {
  data[key] = value;
}

// 现在，data 对象包含了表单数据
console.log(data);

// 访问特定字段的值
console.log(data.name);
console.log(data.surname);
console.log(data.number);

登录后复制

2. 使用 forEach() 方法：

forEach() 方法允许你对 FormData 对象中的每个键值对执行一个函数。

const data = {};
formData.forEach((value, key) => {
  data[key] = value;
});

// 现在，data 对象包含了表单数据
console.log(data);

登录后复制

示例代码：

以下是一个完整的示例，演示如何从表单中收集数据并将其存储到 JavaScript 对象中：

<form id="myForm">
  <label for="name">Enter name:</label>
  <input type="text" id="name" name="name">
  <label for="surname">Enter surname:</label>
  <input type="text" id="surname" name="surname">
  <label for="number">Phone number:</label>
  <input type="text" id="number" name="number">
  <button type="button" onclick="collectFormData()">Collect Data</button>
</form>

<script>
  function collectFormData() {
    const form = document.getElementById('myForm');
    const formData = new FormData(form);
    const data = {};

    formData.forEach((value, key) => {
      data[key] = value;
    });

    console.log(data);
    alert(`Name: ${data.name}, Surname: ${data.surname}, Number: ${data.number}`);
  }
</script>

登录后复制

注意事项：

确保你的 HTML 表单元素具有 name 属性，因为 FormData 对象使用 name 属性作为键来存储数据。
FormData 对象可以处理各种类型的表单字段，包括文本输入框、选择框、复选框和文件上传等。
FormData 对象特别适合用于通过 AJAX 将表单数据发送到服务器。

总结：

使用 JavaScript 的 FormData 对象可以极大地简化从 HTML 表单中收集数据的过程。通过将表单数据存储到 JavaScript 对象中，你可以轻松地访问和使用这些数据，例如在客户端进行验证、显示或通过 AJAX 发送到服务器。这种方法比使用 document.querySelector 逐个获取元素的值更简洁、高效。

以上就是使用 JavaScript 从表单收集数据并存储到变量中的详细内容，更多请关注php中文网其它相关文章！