JS獲取表單數據詳解

在Web開發過程中，表單是常見的數據交互方式，而在這個過程中獲取表單數據就顯得尤為重要。本文從多個方面進行闡述，讓你深入了解JS獲取表單數據的各種方法。

一、JS獲取表單數據的方式

JS獲取表單數據一般有兩種方式：原生JS獲取表單數據和使用第三方庫（如jQuery）獲取表單數據。下面我們將分別介紹這兩種方式。

二、原生JS獲取表單數據

要獲取表單數據，我們可以使用表單元素提供的方法和屬性，比較常用的有以下幾種：

1. `form.elements`：獲取表單中的所有元素，包括input、select、button等；
2. `form.elements.name`：獲取指定name的表單元素，可以返回一個節點或者一個節點列表；
3. `form.elements.type`：獲取指定type的表單元素；
4. `form.elements.value`：獲取表單元素的值。

下面是一個簡單的代碼示例：

<form id="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="提交">
</form>

<script>
  const form = document.getElementById('myForm');
  console.log(form.elements.username.value); // 獲取用戶名
  console.log(form.elements.password.value); // 獲取密碼
</script>

三、JS獲取表單提交的數據

通過表單的`submit`事件，我們可以獲取表單提交的數據。我們可以使用`FormData`對象來獲取表單數據，也可以手動獲取表單中每個表單元素的值。下面是兩個示例：

1. 使用`FormData`對象獲取表單數據

<form id="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="提交">
</form>

<script>
  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')); // 獲取密碼
  });
</script>

2. 手動獲取表單中每個表單元素的值

<form id="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="提交">
</form>

<script>
  const form = document.getElementById('myForm');
  form.addEventListener('submit', event => {
    event.preventDefault(); // 阻止表單默認提交事件
    const username = form.elements.username.value; // 獲取用戶名
    const password = form.elements.password.value; // 獲取密碼
    console.log(username);
    console.log(password);
  });
</script>

四、獲取表單所有數據的方法

有時候，我們需要獲取表單中所有的數據，包括複選框和多選框等。這時候，我們可以通過循環表單元素來獲得所有表單數據。下面是一個簡單的示例代碼：

<form id="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="checkbox" name="checkbox" value="1">選項1</checkbox>
  <input type="checkbox" name="checkbox" value="2">選項2</checkbox>
  <input type="radio" name="radio" value="1">單選項1</radio>
  <input type="radio" name="radio" value="2">單選項2</radio>
  <select name="select">
    <option value="1">選項1</option>
    <option value="2">選項2</option>
  </select>
  <textarea name="textarea"></textarea>
  <input type="submit" value="提交">
</form>

<script>
  const form = document.getElementById('myForm');
  form.addEventListener('submit', event => {
    event.preventDefault(); // 阻止表單默認提交事件
    const formData = {};
    for (let i = 0; i < form.elements.length; i++) {
      const element = form.elements[i];
      if (element.name) {
        if (element.type === 'checkbox' || element.type === 'radio') {
          if (element.checked) {
            if (!formData[element.name]) {
              formData[element.name] = element.value;
            } else {
              formData[element.name] += `, ${element.value}`;
            }
          }
        } else {
          formData[element.name] = element.value;
        }
      }
    }
    console.log(formData);
  });
</script>

五、JS獲取表單數據並求和

有時候，我們需要對錶單數據做一些複雜的處理，例如求和、計算平均值等。下面是一個簡單的例子，展示如何獲取表單中的數值數據並求和：

<form id="myForm">
  <input type="number" name="number1">
  <input type="number" name="number2">
  <input type="submit" value="提交">
</form>

<script>
  const form = document.getElementById('myForm');
  form.addEventListener('submit', event => {
    event.preventDefault(); // 阻止表單默認提交事件
    let sum = 0;
    for (let i = 0; i < form.elements.length; i++) {
      const element = form.elements[i];
      if (element.type === 'number') {
        sum += parseInt(element.value);
      }
    }
    console.log(sum);
  });
</script>

六、JS獲取form表單數據

如果我們有多個表單，我們需要分別處理每個表單的提交事件。這時候，我們可以通過在form標籤上添加`data-type`屬性來進行區分。例如：

<form id="form1" data-type="type1">
  <!-- ... -->
</form>

<form id="form2" data-type="type2">
  <!-- ... -->
</form>

然後在JS代碼中，我們可以根據`data-type`屬性值來進行判斷，如下所示：

<script>
  const forms = document.getElementsByTagName('form');
  for (let i = 0; i < forms.length; i++) {
    const form = forms[i];
    form.addEventListener('submit', event => {
      event.preventDefault(); // 阻止表單默認提交事件

      // 獲取 data-type 屬性
      const type = form.dataset.type;

      // 獲取表單數據的方式略
      // ...

      // 處理數據的方式略
      // ...
    });
  }
</script>

七、jQuery獲取表單數據

如果使用jQuery，我們可以使用`serializeArray()`和`serialize()`兩種方法來獲取表單數據。其中，`serializeArray()`可以將表單數據轉換成一個鍵值對數組，`serialize()`則以URL編碼的方式返回表單數據。下面是一個示例代碼：

<form id="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="提交">
</form>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
  const form = $('#myForm');
  form.submit(event => {
    event.preventDefault(); // 阻止表單默認提交事件
    const formData = form.serializeArray();
    console.log(formData);
  });
</script>

八、獲取表單數據存入數據庫

最後，我們來講一下如何將表單數據存入數據庫。首先，前端需要將表單數據發送到後端，後端再進行存儲等操作。可以使用AJAX技術進行數據的發送和接收，也可以直接使用form標籤的`action`和`method`屬性指定表單提交的地址和方式。下面是一個簡單的示例代碼：

<form id="myForm" action="/submit" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="提交">
</form>

<script>
  const form = $('#myForm');
  form.submit(event => {
    event.preventDefault(); // 阻止表單默認提交事件
    $.ajax({
      url: form.attr('action'),
      type: form.attr('method'),
      data: form.serialize(),
      success: response => {
        console.log(response);
      }
    });
  });
</script>

以上就是JS獲取表單數據的各種方法，希望對你有所幫助。