Сброс полей формы при клике в JQuery: подробный разбор

Быстрый ответ

Нижеприведенный код позволят очистить текст во всех полях формы при активации кнопки сброса. Этот сценарий ищет форму, к которой относится кнопка, и обнуляет значения в полях input и textarea:

$('#resetBtn').click(function() {
  $(this).closest('form').find('input[type="text"], textarea').val('');
});

При нажатии на #resetBtn, текст во всех полях ввода и в многострочных полях искомой формы очищается. Эти поля тут же становятся готовы к новому вводу данных пользователем.

Особые случаи – чекбоксы и выпадающие списки

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

• Снятие отметки с чекбоксов производится с помощью метода .prop():

$('input[type="radio"], input[type="checkbox"]').prop('checked', false);

• Выпадающие списки сбрасываются следующим образом:

$('select').prop('selectedIndex', 0);

Встроенный сброс формы

Если необходимо, можно применить стандартный сброс формы, который возвращает значения к изначально загруженным с сервера:

document.getElementById('myform').reset();

Этот код вызывает встроенный в HTML метод reset, который безупречно очищает все типы полей.

Визуализация процесса

Представьте себе поля ввода как холст, на котором посетители вашего сайта создают свои "картины" при помощи разнообразных данных:

До очистки: 🎨🖌️ [👤 Боб, 📧 bob@example.com, 📝 Привет!]

Применив метод .val(''), мы получим следующий результат:

$('#myform :input').not(':button, :submit, :reset, :hidden').val('');

Холст теперь снова чист:

После очистки: 🎨🧹[     ,    ,    ]

Сброс сложных многостраничных форм

А что делать с формами, содержащими множество страниц и разнообразные элементы? Вот несколько подсказок:

Очистка разделов формы

В многостраничных формах иногда необходимо сбросить лишь текущий раздел. Это можно сделать так:

$('.reset-step').click(function() {
  $(this).closest('.form-step').find('input[type="text"], textarea').val('');
});

Подробнее об этом расскажет наш спикер на видео

Очистка конкретных типов полей

Временами требуется очистить только определенные типы полей. Используйте комбинацию селекторов:

$('#complexFormReset').click(function() {
  $(this).closest('form').find('input[type="email"], input[type="date"], textarea').val('');
});

Clear и reset: что выбрать

Важно разбираться в разнице между сбросом формы и очисткой поля:

• Сброс формы возвращает ее к начальным значениям.
• Очистка поля удаляет введённые пользователем данные и оставляет пустую строку.

Для полного сброса формы используйте $('#myForm').trigger('reset'). Для очистки конкретных полей применяйте метод .val('').

Полезные материалы

1. .val() | jQuery API Documentation
2. :input Selector | jQuery API Documentation
3. Html – Очистка полей формы при помощи jQuery – Stack Overflow
4. .prop() vs .attr() | jQuery API Documentation
5. HTMLFormElement: метод reset() – Веб-API | MDN
6. Управление элементами | Центр обучения jQuery