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

RedDeveloper
17.11.2022 16:30
Получение данных из формы с помощью 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.

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?

20.08.2023 18:21

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

20.08.2023 17:46

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox

19.08.2023 18:39

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

19.08.2023 17:22

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!

Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️

18.08.2023 20:33

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL

14.08.2023 14:49

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.