Как использовать метод карты на элементах формы - PullRequest
Новая
       7

Как использовать метод карты на элементах формы

0 голосов
/ 12 апреля 2020

Я хочу создать список всех имен элементов формы. однако с помощью следующего кода я получил сообщение об ошибке: "input.map не является функцией"

Я знаю, что inputs не является массивом, однако я не уверен, как получить это .map чтобы функционировать? 

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>

Кстати, чтобы запустить код, вам нужно нажать кнопку «зарегистрироваться» (так как это вызов «onclick»)

Ответы [ 2 ]

2 голосов
/ 12 апреля 2020

HTMLFormElement.elements - это HTMLFormControlsCollection, который представляет собой массив, подобный объекту, а не фактический массив. Преобразуйте его в массив, используя Array.from(): 

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>
0 голосов
/ 12 апреля 2020

Я нашел способ решить свою проблему, поэтому подумал, что было бы полезно поделиться с сообществом тем, что я только что узнал

Object.values(inputs) добивается цели! 

function process(form) {
  var inputs = form.elements
  console.log('inputs: ',inputs);
  let list = Object.values(inputs)
  console.log('list: ',list)
  let names = list.map( e => e.name )
  alert('names: ['+names.toString()+"]\nvoila !")
}
<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>
...