原生JavaScript實(shí)現(xiàn)批量獲取表單數(shù)據(jù)

更新時(shí)間：2024年01月11日 15:40:16 作者：萬(wàn)少

這篇文章主要為大家詳細(xì)介紹了如何使用原生JavaScript實(shí)現(xiàn)批量獲取表單數(shù)據(jù),文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下

背景

昨天表弟問(wèn)了我一個(gè)問(wèn)題

我立馬會(huì)回了一段代碼過(guò)去。豈能說(shuō)不會(huì)！

分析

其實(shí)要快速獲取表單數(shù)據(jù)的功能并不復(fù)雜。就兩步

分析需求
編寫代碼
要清楚常見(jiàn)的表單有哪些
根據(jù)表單獲取到的數(shù)據(jù)結(jié)構(gòu)是什么樣子

常見(jiàn)的表單標(biāo)簽

email、date等存在兼容性的表單標(biāo)簽可以忽略。

文本框 input[type=text]

<input type="text">

密碼框 input[type=password]

<input type="password">

文本域 textarea

<textarea></textarea>

下拉列表 select

<select></select>

單選框 input[type=radio]

<input type="radio">

復(fù)選框 input[type=checkbox]

<input type="checkbox">

文件選擇框 input[type=file]

<input type="file">

獲取表單值的方式

不同的標(biāo)簽，有不同的獲取它們值的方式

文本框和密碼框和文本域

他們都是通過(guò) value屬性直接獲取值

dom.value

下拉列表

下拉列表其實(shí)也可以多選的 multiple

  <select name="city" multiple>
    <option value="廣州">廣州</option>
    <option value="東莞">東莞</option>
    <option value="佛山">佛山</option>
  </select>

當(dāng)下拉列表沒(méi)有添加多選時(shí)，直接通過(guò)value屬性即可獲取到對(duì)應(yīng)值。dom.value

當(dāng)下拉列表添加多選時(shí) ，獲取獲取子元素 option，通過(guò)判斷是否 selected 來(lái)獲取選中的值。

  const select = document.querySelector("select")
  for (let index = 0; index < select.children.length; index++) {
    const option = select.children[index];
    if (option.select) {
      console.log(option.value);
    }
  }

單選框

單選框的特點(diǎn)是同一組單選框都會(huì)有同一個(gè)name屬性。并且選中的單選框的checked屬性為true

  <input type="radio" name="gender" value="男" checked> 男
  <input type="radio" name="gender" value="女"> 女

因此便可以通過(guò)這個(gè)特點(diǎn)來(lái)獲取選中的單選框。獲取的方式有兩種

document.querySelector("[name=gender]:checked").value

或者

const radios = document.querySelectorAll("[name=gender]")
for (let index = 0; index < radios.children.length; index++) {
  const radio = radios.children[index];
  if (radio.checked) {
    console.log(radio.value);
    break 
  }
}

復(fù)選框

復(fù)選框的用法和單選框類似，只不過(guò)復(fù)選框是可以擁有多個(gè)值

  <input type="checkbox" name="hobby" value="唱"> 唱
  <input type="checkbox" name="hobby" value="跳"> 跳
  <input type="checkbox" name="hobby" value="rap"> rap
  <input type="checkbox" name="hobby" value="打籃球"> 打籃球

它的獲取方式也有兩種，一種直接querySelectorAll帶上合適的選擇器即可

document.querySelectorAll("[name=hobby]:checked").value

另外一種也是遍歷

const checkboxs = document.querySelectorAll("[name=hobby]")
for (let index = 0; index < checkboxs.children.length; index++) {
  const checkbox = checkboxs.children[index];
  if (checkbox.checked) {
    console.log(checkbox.value);
  }
}

文件選擇框

最后是文件選擇框，文件選擇框需要通過(guò) dom.files來(lái)獲取即可，當(dāng)然，它也可以通過(guò)添加 multiple 屬性來(lái)實(shí)現(xiàn)多選

<input type="file" name="avatar" multiple>

dom.files // 獲取到選中的文件

期望得到的數(shù)據(jù)結(jié)構(gòu)

當(dāng)我們了解了常見(jiàn)的表單標(biāo)簽后，那么我們要假設(shè)期待得到的數(shù)據(jù)結(jié)構(gòu)

提煉關(guān)鍵信息：

當(dāng)表單是 文本框、密碼框、文本域 、單選框時(shí)，我們都可以直接通過(guò) value屬性來(lái)獲取數(shù)據(jù)，并且存放時(shí)，他們是字符串類型

{
    文本框:"用戶名",
    密碼框:"密碼",
    性別:"男"
}

當(dāng)表單是下拉列表時(shí)，存放它的值需要分情況

單選的下拉列表（沒(méi)有 multiple 屬性)，是字符串類型

{
    城市:"廣州"
}

多選的下拉列表（有 multiple 屬性），是數(shù)組類型

{
    城市:["廣州","東莞"]
}

當(dāng)表單是 多選框時(shí)，存放它的數(shù)據(jù)時(shí)，是數(shù)組類型

{
    喜好:["唱","跳","rap"]
}

當(dāng)表單是 文件選擇框時(shí)，存放它的數(shù)據(jù)，是數(shù)組（因?yàn)榭赡芏噙x文件)

{
    照片:[照片1,照片2]
}

編碼流程

完整代碼

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>快速獲取表單數(shù)據(jù)</title>
  </head>

  <body>
    <form>
      <!-- 輸入姓名的文本框 -->
      <div>
        <input type="text" placeholder="請(qǐng)輸入姓名" name="userName" />
      </div>

      <!-- 選擇性別的單選按鈕 -->
      <div>
        <input type="radio" name="gender" value="男" /> 男
        <input type="radio" name="gender" value="女" /> 女
      </div>

      <!-- 選擇是否在世的單選按鈕 -->
      <div>
        <input type="radio" name="alive" value="還在" checked /> 還在
        <input type="radio" name="alive" value="上天了" /> 上天了
      </div>

      <!-- 選擇興趣愛(ài)好的復(fù)選框 -->
      <div>
        <input type="checkbox" name="hobby" value="唱" /> 唱
        <input type="checkbox" name="hobby" value="跳" /> 跳
        <input type="checkbox" name="hobby" value="rap" /> rap
        <input type="checkbox" name="hobby" value="打籃球" /> 打籃球
      </div>

      <!-- 選擇城市的下拉框 -->
      <div>
        <select name="city" multiple>
          <option value="廣州">廣州</option>
          <option value="東莞">東莞</option>
          <option value="佛山">佛山</option>
        </select>
      </div>

      <!-- 輸入個(gè)人簡(jiǎn)介的文本域 -->
      <div>
        <textarea name="intro"></textarea>
      </div>

      <!-- 上傳頭像的文件輸入框 -->
      <div>
        上傳頭像
        <input type="file" name="avatar" multiple />
      </div>

      <!-- 提交按鈕 -->
      <div>
        <button>提交</button>
      </div>
    </form>

    <script>
      // 獲取表單元素并存儲(chǔ)在常量form中
      const form = document.querySelector('form')

      // 為表單添加提交事件監(jiān)聽(tīng)器
      form.addEventListener('submit', function (e) {
        // 阻止默認(rèn)的表單提交行為
        e.preventDefault()

        // 序列化表單數(shù)據(jù)，并存儲(chǔ)在常量data中
        const data = serialize(form)
        console.log(data)
      })

      // 定義序列化函數(shù)，接收一個(gè)表單元素作為參數(shù)
      function serialize(tempForm) {
        // 創(chuàng)建一個(gè)空對(duì)象，用于存儲(chǔ)序列化后的表單數(shù)據(jù)
        const data = {}

        // 獲取表單中所有具有"name"屬性的字段
        const formFieldList = tempForm.querySelectorAll('[name]')

        // 遍歷所有表單字段
        formFieldList.forEach((field) => {
          // 檢查字段的類型和標(biāo)簽名
          if (
            field.type === 'text' ||
            field.type === 'password' ||
            field.tagName === 'TEXTAREA'
          ) {
            // 如果是文本輸入框或文本域，則將其值存儲(chǔ)在data對(duì)象中
            data[field.name] = field.value
          } else if (field.tagName === 'SELECT') {
            // 如果是下拉框
            if (field.multiple) {
              // 如果是多選下拉框，使用reduce將選中的項(xiàng)的值存儲(chǔ)在數(shù)組中
              data[field.name] = [...field.children].reduce((a, b) => {
                if (b.selected) {
                  a.push(b.value)
                }
                return a
              }, [])
            } else {
              // 如果是單選下拉框，直接將選中的項(xiàng)的值存儲(chǔ)在data對(duì)象中
              data[field.name] = field.value
            }
          } else if (field.type === 'radio' && field.checked) {
            // 如果是單選按鈕且被選中，則將其值存儲(chǔ)在data對(duì)象中
            data[field.name] = field.value
          } else if (field.type === 'checkbox' && field.checked) {
            // 如果是復(fù)選框且被選中
            if (!data[field.name]) {
              // 如果該字段在data對(duì)象中不存在，創(chuàng)建一個(gè)數(shù)組存儲(chǔ)值
              data[field.name] = [field.value]
            } else {
              // 如果已存在，將值添加到數(shù)組中
              data[field.name].push(field.value)
            }
          } else if (field.type === 'file') {
            // 如果是文件上傳字段
            // 如果支持多文件上傳，將文件對(duì)象數(shù)組存儲(chǔ)在data對(duì)象中
            data[field.name] = field.files
          }
        })

        // 返回包含序列化后數(shù)據(jù)的對(duì)象
        return data
      }
    </script>
  </body>
</html>

以上就是原生JavaScript實(shí)現(xiàn)批量獲取表單數(shù)據(jù)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript獲取表單數(shù)據(jù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: