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

做者：VALENTINO GAGLIARDI
譯者：前端小智
來源：valentinog
移動端閱讀： https://mp.weixin.qq.com/s/rj...

---

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

---

問：如何用 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。

---

交流

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

https://github.com/qq44924588...

我是小智，公衆號「大遷世界」做者，對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨，在進階的路上，共勉！

關注公衆號，後臺回覆福利，便可看到福利，你懂的。