Получение данных из формы с помощью JavaScript - краткое руководство

Получить данные из формы с помощью JS очень просто: вы запрашиваете элемент формы, передаете его конструктору new FormData() и, наконец, получаете нужную информацию с помощью метода .get().

Настройка

Для начала работы нам понадобится index.html с формой и script.js для работы с формой.

<!-- index.html -->
<form>
    <div>
      <label for="fullName">Full name</label> 
      <input 
        type="text" 
        name="fullName"
        id="fullName"
        aria-label="Full name"
        placeholder="Enter your full name" 
        required
      >
    </div>
    
    <div>
      <label for="email">Email</label>
      <input 
        type="email" 
        name="email" 
        id="email"
        placeholder="Enter your email" 
        aria-label="Email address" 
        required
      >
    </div>
  
    <div>
      <button type="submit">Submit</button>
    </div>

Выше представлена простая форма, с которой мы будем работать.

Чтобы получить данные из формы, мы должны запросить элемент формы и добавить слушателя события 'submit'. Когда форма будет отправлена, мы создадим новый объект с помощью new FormData(), а затем получим нужные нам данные с помощью метода .get().

Теперь давайте разберемся с нашим script.js.

const signUpForm = document.querySelector('form');

signUpForm.addEventListener('submit', function(event) {
    event.preventDefault();
    const formData = new FormData(signUpForm);
    const userName = formData.get('fullName');
    const userEmail = formData.get('s');
    console.info(userName);
    console.info(userEmail);
})

Это все, что нам нужно для получения данных из формы. Вы можете узнать больше об объекте FormData и его методах на сайте MDN.