Как обработать форму с помощью JavaScript?

Question

[Антон Семенихин]

Нужно обработать форму на сайте с помощью JS. Я понял всё, кроме одного - какой атрибут использовать в теге , чтобы была создана переменная со значением формы?

Comments

[Надим]

Атрибут name.

Answer 1

[FinGanapre]

<form id="form-id">
  <input type="text" name="some_name" value="">
  <input type="text" name="some_name2" value="">
  <button type="submit">Отправить</button>
</form>

window.onload = e => {
  const form = document.querySelector('#form-id')
  
  const formHandler = e => {
    e.preventDefault()
    const formData = new FormData( e.target )
    console.log(...formData)
  }
  
  form.addEventListener('submit', formHandler)
}

Answer 2

[Mazino]

Все зависит от с каким бекендом идет работа.
HTML:

<form name="form">
  <input type="text" name="name" value="user">
  <input type="text" name="password" value="qwerty">
  <input type="submit">
</form>

JS:

const form = document.querySelector('form[name="form"]')
form.addEventListener('submit', e => {
  e.preventDefault()
  const data = new FormData(form)
  // Далее будет код построения запроса к серверу и отправка данных формы.
})

В зависимости от бекенда, если это к примеру json api, вы можете обработать форму и в таком варианте:

const data = JSON.stringify(Object.fromEntries(new FormData(form).entries()))

Или можно вручную обойти элементы формы, задать свои имена для полей, проверить валидность и.т.д
PS разумеется это только обработка самой формы, еще нужно построить запрос и передать в него данные формы, так же нужно обработать ответ, если не хотите перезагружать страницу. Вы так же можете сами наполнять объект FormData, не передавая ему форму для обработки.
Почитать об этом можно здесь и здесь

Answer 3

[Дима Долготер]

$( "form" ).on( "submit", function( event ) {
 
  event.preventDefault();
 
  console.log( $(this).serialize() );
 
});

Comments

[Mazino]

Откуда уверенность, что у автора стоит JQuery?

[Дима Долготер]

Mazino, оттуда же откуда и уверенность что он знает js