Как получить все значения из формы?

134

14 октября 2019, 14:20

Можно относительно удобно получить значение input-от из формы, если мы знаем name каждого в отдельности input. А существует ли относительно простой способ получить значение любых input из формы, имею ввиду нативными средствами.

const form = document.querySelector('form'); 
 
const submit = e => { 
  e.preventDefault(); 
  console.log(e.currentTarget.name.value); 
  console.log(e.currentTarget.name2.value); 
  console.log(e.currentTarget.name3.value); 
  console.log(e.currentTarget.values); // ?? 
} 
form.addEventListener('submit', submit)

<form> 
  <div> 
    <input name="name" /> 
  </div> 
  <div> 
    <input name="name2" /> 
  </div> 
  <div> 
    <input name="name3" /> 
  </div> 
  <button>GO</button> 
</form>

Answer 1

const form = document.querySelector('form'); 
 
const submit = (e) => { 
  e.preventDefault(); 
  const formData = new FormData(form); 
  for(let pair of formData.entries()) { 
     console.log(pair); // где pair - это массив вида [name, value] 
  } 
} 
form.addEventListener('submit', submit)

<form> 
  <div> 
    <input name="name" value="1" /> 
  </div> 
  <div> 
    <input name="name2" value="2" /> 
  </div> 
  <div> 
    <input name="name3" value="3" /> 
  </div> 
  <button>GO</button> 
</form>

Answer 2

const form = document.querySelector('form'); 
 
const submit = e => { 
  e.preventDefault(); 
  e.currentTarget.querySelectorAll('input').forEach(function(field){ 
    console.log(field.name+"="+field.value); 
  }); 
} 
form.addEventListener('submit', submit)

<form> 
  <div> 
    <input name="name" /> 
  </div> 
  <div> 
    <input name="name2" /> 
  </div> 
  <div> 
    <input name="name3" /> 
  </div> 
  <button>GO</button> 
</form>

Answer 3

Все поля с атрибутом name, доступны по их имени или индексу. Так же у элемента form есть свойство length

Поэтому пройтись по всем значимым элементам можно с помощью простого цикла:

const form = document.querySelector('form'); 
 
const submit = e => { 
  e.preventDefault(); 
  for (var i = 0; i < e.currentTarget.length; i++) { 
    console.log(e.currentTarget[i].value); 
  } 
} 
form.addEventListener('submit', submit)

<form> 
  <div> 
    <input name="name" /> 
  </div> 
  <div> 
    <input name="name2" /> 
  </div> 
  <div> 
    <input name="name3" /> 
  </div> 
  <button>GO</button> 
</form>