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

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

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

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

 
 
 
 
  1.    用户名
  2.    
  3.    简介
  4.    
  5.    任务
  6.    
  7.    提交
  8.  

上面每个字段都有对应的的type,ID和 name属性,以及相关联的label。用户单击“提交”按钮后,我们如何从此表单中获取所有数据?

有两种方法:一种是用黑科技,另一种是更清洁,也是最常用的方法。为了演示这种方法,我们先创建form.js,并引入文件中。

从事件 target 获取表单字段

首先,我们在表单上为Submit事件注册一个事件侦听器,以停止默认行为(它们将数据发送到后端)。

然后,使用this.elements或event.target.elements访问表单字段:

相反,如果需要响应某些用户交互而动态添加更多字段,那么我们需要使用FormData。

使用 FormData

首先,我们在表单上为submit事件注册一个事件侦听器,以停止默认行为。接着,我们从表单构建一个FormData对象:

 
 
 
 
  1. const form = document.forms[0];
  2. form.addEventListener("submit", function(event) {
  3.   event.preventDefault();
  4.   const formData = new FormData(this);
  5. });

除了append()、delete()、get()、set()之外,FormData 还实现了Symbol.iterator。这意味着它可以用for...of 遍历:

 
 
 
 
  1. const form = document.forms[0];
  2. form.addEventListener("submit", function(event) {
  3.   event.preventDefault();
  4.   const formData = new FormData(this);
  5.   for (const formElement of formData) {
  6.     console.log(formElement);
  7.   }
  8. })

除了上述方法之外,entries()方法获取表单对象形式:

 
 
 
 
  1. const form = document.forms[0];
  2. form.addEventListener("submit", function(event) {
  3.   event.preventDefault();
  4.   const formData = new FormData(this);
  5.   const entries = formData.entries();
  6.   const data = Object.fromEntries(entries);
  7. });

这也适合Object.fromEntries() (ECMAScript 2019)

为什么这有用?如下所示:

 
 
 
 
  1. const form = document.forms[0];
  2. form.addEventListener("submit", function(event) {
  3.   event.preventDefault();
  4.   const formData = new FormData(this);
  5.   const entries = formData.entries();
  6.   const data = Object.fromEntries(entries);
  7.   // send out to a REST API
  8.   fetch("https://some.endpoint.dev", {
  9.     method: "POST",
  10.     body: JSON.stringify(data),
  11.     headers: {
  12.       "Content-Type": "application/json"
  13.     }
  14.   })
  15.     .then(/**/)
  16.     .catch(/**/);
  17. });

一旦有了对象,就可以使用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。内容未经允许不得转载,或转载时需注明来源: 创新互联