Сброс полей формы при клике в 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('').