关闭

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

时间: 2020-09-10阅读: 55标签: 表单

问:如何用 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/


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9730

关闭

关于input的一些问题解决方法分享

input是我们接受来自用户的数据常用标签,在前端开发中:移动端底部input被弹出的键盘遮挡。控制input显/隐密码。在input中输入emoji表情导致请求失败。input多行输入显示换行。输入框首尾清除空格-trim()、在input中监听键盘事件

阻止表单的默认提交事件

表单一点击提交按钮(submit)必然跳转页面,如果表单的action为空也会跳转到自己的页面,即效果为刷新当前页。 如下,可以看到一点击提交按钮

input输入限制只能为数字

input输入限制只能为数字的2种方法,通过onkeypress事件和onkeyup事件,输不上任何非数字字符。加上正则匹配不能输入非数字字符就可以了

Validate表单验证插件之异步操作

使用ajax方式进行验证某个元素的值(只是验证元素的值,而不是ajax方式提交表单),默认会提交当前验证的值到请求的地址,如果要提交其它的值,可以使用data选项。

JS使用textarea模拟post提交表单

textarea代表HTML表单多行输入域,textarea标签是成对出现的,以<textarea>开始,以</textarea>结束。cols -- 多行输入域的列数,rows -- 多行输入域的行数

js如何获取checkbox被选中的值?

通过复选框的name属性,遍历后将被选中的复选框的值输出:checkbox[index].nextSibling.nodeValue: 获取的是checkbox中标签包裹的文本值,建立一个数组,使用push 方法将被选中的元素保存到数组

Js使用表单元素验证表单

最简单的HTML结构:网站最基础的就是注册,它是一个系统的交互基础;因为用户最后要去点击\\\"注册\\\"按钮,所以我们就在\\\"注册\\\"按钮上添加一个onclick事件属性,引用eg.regCheck()

javascript中如何判断checkbox是否选中?

javascript判断checkbox是否选中的方法:1、直接通过checkbox的checked属性判断。2、调用jQuery使用attr()或is()方法判断。对于在js中来判断checkbox是否被选中很简单,示例如下:

Html5中input新增的表单元素和属性介绍。

input标签主要用于Web表单的创建交互,以便接受来自用户的数据。 我们通过更改type属性的值,来实现不同的输入类型。这篇文章主要讲解html5中新增的表单属性。

HTML5表单新特性

HTML5表单新特性之——新的input typeEmail:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示矿口(可定制内容不能定制样式),url:URL地址输入域。在表单提交时提供简单的URL地址格式验证

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!