黄旭东的博客

JavaScript 提取 Form 表单数据的方法

现在应该很少有用 JavaScript 提取表单数据需求,一般直接提交 form 表单就好了,或者都是 vue、react 之类的 MVVM 框架内部绑定好了表单。
网上搜索了下大部分都是遍历 form 下的 input 之类的输入控件提取 value 在组合成对象。这样实际上这样做问题很多。可能会取不到值。
最后参考了 MDN 利用 FormData 来获取表单数据,具体实现如下:

<html>
  <head>
    <title>Extract Form Data</title>
  </head>
  <body>
    <form>
      <div>
        <label for="username">Enter name:</label>
        <input type="text" name="username" />
      </div>
      <div>
        <label for="password">Enter password:</label>
        <input type="password" name="password" />
      </div>
      <div>
        <label for="photo">Upload photo:</label>
        <input type="file" name="photo" />
      </div>
      <input type="submit" value="Submit!" />
    </form>

    <script>
      function getFormData(form) {
        const result = {};

        const formData = new FormData(
          typeof form === "string" ? document.querySelector(form) : form
        );

        [...formData.keys()].forEach(key => {
          result[key] = formData.get(key);
        });

        return result;
      }

      console.log(getFormData("form"));
    </script>
  </body>
</html>
黄旭东 发布于