如何在表单元素上使用映射方法-前端问题

How to use a map method on form elements(如何在表单元素上使用映射方法)

本文介绍了如何在表单元素上使用映射方法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想创建一个表单元素的所有名称的列表。但是，使用以下代码时，我得到了错误： "inputs.map不是函数"

我知道inputs不是数组，但我不确定如何使This.map起作用？数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

function process(form) {
  console.dir(form)
  var inputs = form.elements
  for (let i = 0; i < inputs.length; i++) {
    console.log(i+':'+inputs[i].name+': '+inputs[i].value);
  }
  let names = inputs.map( e => e.name )

  console.log(names)
  
}

<form name=form1 method=none>
firstname: <input name=lastn value="a" type=text>
<br>lastname: <input name=firstn value="b" type=text>
<br>zipcode: <input name=zip value="c" type=text>
<br>ip: <input name=ip value="127.0.0.1" type=text disabled>
<br><input onclick="process(this.parentNode)" name=button type=button value="register">
</form>

btw要运行代码，您必须单击"注册"按钮(因为这是一个"onClick"调用)

推荐答案

HTMLFormElement.elements是一个HTMLFormControlsCollection，它是一个类似数组的对象，而不是一个实际的数组。使用Array.from()将其转换为数组：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

function process(form) {
  var inputs = Array.from(form.elements)

  const names = inputs.map(e => e.name)

  console.log(names)
}

<form name=form1 method=none>
  firstname: <input name=lastn value="a" type=text>
  <br>lastname: <input name=firstn value="b" type=text>
  <br>zipcode: <input name=zip value="c" type=text>
  <br>ip: <input name=ip value="127.0.0.1" type=text disabled>
  <br><input onclick="process(this.parentNode)" name=button type=button value="register">
</form>

这篇关于如何在表单元素上使用映射方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！