原生js实现获取form表单数据代码实例

获取 form 表单数据是 Web 开发中常见的需求，可以使用 JavaScript 代码来实现这一功能。本文将介绍如何使用原生 JavaScript 获取表单数据。

获取表单元素

要获取表单数据，首先需要获取表单元素。可以使用以下代码来获取表单元素：

const formElement = document.getElementById('form');

上述代码获取了表单元素的 DOM 对象，其中 form 为表单元素的 ID。如果需要获取表单中的某个特定元素，可以使用以下代码：

const inputElement = document.getElementById('input');

上述代码获取了表单中 ID 为 input 的表单元素。

获取表单数据

获取表单数据的一种方法是使用 FormData 对象。可以使用以下代码来获取表单的 FormData 对象：

const formData = new FormData(formElement);

上述代码使用表单元素的 DOM 对象创建一个 FormData 对象。FormData 对象存储了表单中所有元素的数据。

要访问表单元素的数据，可以使用以下代码：

const value = formData.get('elementName');

上述代码获取了表单元素 elementName 的值。

以下是一个完整的例子，演示如何使用以上方法获取表单元素和表单数据：

<form id="form">
  <label for="name">Name:</label>
  <input type="text" name="name" id="name"><br>

  <label for="email">Email:</label>
  <input type="email" name="email" id="email"><br>

  <label for="message">Message:</label>
  <textarea name="message" id="message"></textarea><br>

  <button type="submit">Submit</button>
</form>

<script>
  const formElement = document.getElementById('form');

  formElement.addEventListener('submit', (event) => {
    event.preventDefault(); // 阻止表单提交

    const formData = new FormData(formElement);

    // 获取表单数据
    const nameValue = formData.get('name');
    const emailValue = formData.get('email');
    const messageValue = formData.get('message');

    // 打印表单数据
    console.log('Name:', nameValue);
    console.log('Email:', emailValue);
    console.log('Message:', messageValue);

    // 处理表单数据
    // ...
  });
</script>

以上代码演示了如何使用 FormData 对象来获取表单数据。

另一个获取表单数据的方法是手动遍历表单元素。可以使用以下代码来遍历表单元素并获取其数据：

const inputs = formElement.querySelectorAll('input, textarea');

const data = {};
for (let i = 0; i < inputs.length; i++) {
  const input = inputs[i];
  data[input.name] = input.value;
}

以上代码中，data 对象存储了表单元素的数据。可以使用以下代码来访问表单元素的数据：

const value = data['elementName'];

以下是一个完整的例子，演示如何使用遍历表单元素的方法获取表单数据：

<form id="form">
  <label for="name">Name:</label>
  <input type="text" name="name" id="name"><br>

  <label for="email">Email:</label>
  <input type="email" name="email" id="email"><br>

  <label for="message">Message:</label>
  <textarea name="message" id="message"></textarea><br>

  <button type="submit">Submit</button>
</form>

<script>
  const formElement = document.getElementById('form');

  formElement.addEventListener('submit', (event) => {
    event.preventDefault(); // 阻止表单提交

    const inputs = formElement.querySelectorAll('input, textarea');

    const data = {};
    for (let i = 0; i < inputs.length; i++) {
      const input = inputs[i];
      data[input.name] = input.value;
    }

    // 获取表单数据
    const nameValue = data['name'];
    const emailValue = data['email'];
    const messageValue = data['message'];

    // 打印表单数据
    console.log('Name:', nameValue);
    console.log('Email:', emailValue);
    console.log('Message:', messageValue);

    // 处理表单数据
    // ...
  });
</script>

以上代码演示了如何使用遍历表单元素的方法来获取表单数据。