Очистка формы после отправки на чистом JavaScript

Завершающим шагом после отправки формы является сброс введённых пользователем данных. Для этого подойдет метод reset(). Очистка формы после отправки от введенной пользователем информации является вполне логичной. Для этой цели мы будем использовать простой и удобный метод.

Зачем осуществлять сброс формы?

Прежде чем мы рассмотрим как это сделать, давайте разберёмся в причинах, по которым необходимо это действие:

• Исправление ошибок пользователя. Если пользователи случайно введут неправильные данные, они могут сбросить её вместо редактирования каждого поля отдельно. Сброс подобен «отмене» для всей формы.
• Подготовка к следующему вводу. После успешной отправки формы происходит её очистка, чтобы подготовить к следующему вводу.
• Пользователь передумал. Юзер может изменить своё решение на полпути и захотеть начать ввод заново. Сброс позволяет им сделать это легко.
• Сбой проверки. Если проверка на стороне клиента завершается неудачей, можно удалить введённые данные и вернуть форму в исходное состояние.
• Многоступенчатые формы. Для длинных многостраничных форм опция сброса пригодится на тот случай, если пользователь захочет перезапустить процесс.

По данным Института Баймарда, средний процент отказов от оплаты товаров в корзинах в онлайн-магазинах составляет 69,57%. Результаты других исследований показывают около 78% отказов пи заполнении длинных или сложных форм.

Очистка формы после отправки на JavaScript может помочь уменьшить количество отказов в таких случаях.

Метод HTMLFormElement.reset()

Для очистки полей формы на чистом JavaScript достаточно дописать в обработчик событий submit этот метод, применив его к элементу, который вызывает его. В нашем случае — это форма.

document.addEventListener('submit', (e) => { 
// Отключаем событие по умолчанию 
    e.prevent.Default(); 
// Очищаем поля формы 
    e.target.reset(); 
});

Этот способ позволяет легко произвести очистку форму после отправки. Если первоначально в полях формы были указаны дефолтные значения, которые пользователь изменил, то произойдет откат к их исходному состоянию. Обнулятся только те поля, которые изначально были пустыми.

Читайте также: Как правильно использовать return в JavaScript функции.

Очистка формы после отправки: кроссбраузерность

Стоит отметить, что метод HTMLFormElement.reset() для очистки формы после отправки работает во всех современных браузерах.