如何用 JS 一次獲取 HTML 表單的全部字段 ？

做者：VALENTINO GAGLIARDI
譯者：前端小智
來源：valentinog

有夢想，有乾貨，微信搜索 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。

問：如何用 JS 一次獲取 HTML 表單的全部字段 ？

考慮一個簡單的 HTML 表單，用於將任務保存在待辦事項列表中：

<form>
    <label for="name">用戶名</label>
    <input type="text" id="name" name="name" required>

    <label for="description">簡介</label>
    <input type="text" id="description" name="description" required>

    <label for="task">任務</label>
    <textarea id="task" name="task" required></textarea>

    <button type="submit">提交</button>
  </form>

上面每一個字段都有對應的的type，ID和 name屬性，以及相關聯的label。 用戶單擊「提交」按鈕後，咱們如何今後表單中獲取全部數據？

有兩種方法：一種是用黑科技，另外一種是更清潔，也是最經常使用的方法。爲了演示這種方法，咱們先建立form.js，並引入文件中。

從事件 target 獲取表單字段

首先，咱們在表單上爲Submit事件註冊一個事件偵聽器，以中止默認行爲（它們將數據發送到後端）。

而後，使用this.elements或event.target.elements訪問表單字段：

相反，若是須要響應某些用戶交互而動態添加更多字段，那麼咱們須要使用FormData。

使用 FormData

首先，咱們在表單上爲submit事件註冊一個事件偵聽器，以中止默認行爲。接着，咱們從表單構建一個FormData對象：

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);
});

除了append()、delete()、get()、set()以外，FormData 還實現了Symbol.iterator。這意味着它能夠用for...of 遍歷：

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);

  for (const formElement of formData) {
    console.log(formElement);
  }
})

除了上述方法以外，entries()方法獲取表單對象形式：

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  const entries = formData.entries();
  const data = Object.fromEntries(entries);
});

這也適合Object.fromEntries() (ECMAScript 2019)

爲何這有用？以下所示：

const form = document.forms[0];

form.addEventListener("submit", function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  const entries = formData.entries();
  const data = Object.fromEntries(entries);

  // send out to a REST API
  fetch("https://some.endpoint.dev", {
    method: "POST",
    body: JSON.stringify(data),
    headers: {
      "Content-Type": "application/json"
    }
  })
    .then(/**/)
    .catch(/**/);
});

一旦有了對象，就能夠使用fetch發送有效負載。

當心：若是在表單字段上省略 name屬性，那麼在FormData對象中剛沒有生成。

總結

要從HTML表單中獲取全部字段，能夠使用：

• this.elements或event.target.elements，只有在預先知道全部字段而且它們保持穩定的狀況下，才能使用。

使用FormData構建具備全部字段的對象，以後能夠轉換，更新或將其發送到遠程API。*

---

原文：https://www.valentinog.com/bl...

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

---

交流

文章每週持續更新，能夠微信搜索【大遷世界 】第一時間閱讀，回覆【福利】有多份前端視頻等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，歡迎Star。