如何在表单元素上使用映射方法

2022-07-11 00:00:00 dictionary arrays element forms javascript

我想创建一个表单元素的所有名称的列表。 但是,使用以下代码时,我得到了错误: "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>

相关文章