Получение данных из формы с помощью 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.log(userName);
    console.log(userEmail);
})

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

Пользовательские правила валидации в Laravel
Пользовательские правила валидации в Laravel

16.11.2022 13:12

Если вы хотите создать свое собственное правило валидации, Laravel предоставляет возможность сделать это. Создайте правило с помощью следующей команды. Давайте создадим правило, которое будет проверять, что строка написана в верхнем регистре.

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML

15.07.2022 14:37

Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно является внешний метод. Это помогает сохранить код незагроможденным и организованным. Однако ситуация может диктовать использование двух других методов....

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly

16.05.2022 21:25

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

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)

18.04.2022 13:17

Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно использовать выбранный нами фреймворк, и он становится основным подходом к каждому новому продукту. Однако существует и другой подход к разработке. Вы...

Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React

13.04.2022 15:26

Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей. Первое, что вам нужно сделать, это установить гем Flatpickr через npm. Вы можете найти эту информацию на их сайте или просто использовать следующий код:

В чем разница между Promise и Observable?
В чем разница между Promise и Observable?

11.04.2022 20:00

Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.