如何用JS一次获取HTML表单的所有字段？

问：如何用 JS 一次获取 HTML 表单的所有字段 ?

成都创新互联公司"三网合一"的企业建站思路。企业可建设拥有电脑版、微信版、手机版的企业网站。实现跨屏营销，产品发布一步更新，电脑网络+移动网络一网打尽，满足企业的营销需求！成都创新互联公司具备承接各种类型的成都网站建设、做网站项目的能力。经过十余年的努力的开拓，为不同行业的企事业单位提供了优质的服务，并获得了客户的一致好评。

考虑一个简单的 HTML 表单，用于将任务保存在待办事项列表中：

上面每个字段都有对应的的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。

作者：VALENTINO GAGLIARDI 译者：前端小智来源：valentinog

原文：https://www.valentinog.com/blog/form-data/

本文转载自微信公众号「CSS特效世界」，可以通过以下二维码关注。转载本文请联系CSS特效世界公众号。

分享题目：如何用JS一次获取HTML表单的所有字段？
转载来于：http://www.shufengxianlan.com/qtweb/news39/240739.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容