Иногда мы хотим прослушивать событие отправки формы с помощью JavaScript, чтобы мы могли что-то сделать с данными формы на стороне клиента.
В этой статье мы рассмотрим, как прослушивать событие отправки формы с помощью JavaScript.
Прослушать отправленное событие
Мы можем прослушивать событие submit формы, чтобы отслеживать нажатия кнопки отправки формы.
Например, если у нас есть следующая форма:
<form> <input type="text" name="name"> <input type="submit" name="submit"> </form>
Тогда мы можем написать:
const form = document.querySelector("form")
form.addEventListener("submit", (e) => {
e.preventDefault();
const formData = new FormData(form)
console.log(formData.entries())
});
для прослушивания события отправки формы и получения данных из формы с помощью конструктора FormData.
Получаем форму с document.querySelector .
Затем мы вызываем addEventListener с 'submit' в качестве первого аргумента.
Второй аргумент addEventListener — это обратный вызов, который обрабатывает форму при ее отправке.
В обратном вызове мы вызываем e.preventDefault(), чтобы остановить отправку формы на стороне сервера.
Затем мы используем конструктор FormData с выбранным нами элементом form, чтобы получить его значение.
А затем используем метод entries для получения введенного значения.
Он возвращает итератор с парами ключ-значение значений формы.
Ключом каждой записи является значение атрибута name поля.
А ценность есть ценность.
Итак, если мы введем «ааа» в текстовое поле, мы получим:
[
[
"name",
"aaa"
]
]
как результат, возвращенный entries .
Заключение
Мы можем прослушивать событие submit формы, чтобы следить за нажатиями кнопки отправки формы.
Затем мы можем получить введенные значения с помощью конструктора FormData.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube,и Discord. Заинтересованы в Взлом роста? Ознакомьтесь с разделом Схема.
