Задать вопрос
Platton
@Platton
javascript

Как сделать очистку формы на JS?

В JS я не селен. Помогите советом как сделать кнопку по очистке формы от предустановленных уже значений в "value" (без отправки на сервер) средствами JS или jquery?
Например есть такая форма поиска:
<form id="searchform" method="post">
       <input type="text" name="search_name" maxlength="27" value="Имя">
       <input type="text" name="search_mail" maxlength="35" value="Почтовый адрес">
       <input type="checkbox" name="search_banned" value="1" {ifch}>
        <select name="">
		<option value="">----</option>
		<option value="asc">{us_grow}</option>
		<option value="desc">{us_desc}</option>
	</select>
       <input type="submit" name="us_show" value="Показать">
       <input type="button"  value="Сбросить">
</form>


У меня Js - скрипты вынесены в отдельный файл который подключается в html.
Нашел в инете пример скрипта:
$('.reset').on('click', function() {
    $(this).closest('form').find('input[type=text], textarea').val('');
});


Этот скрипт я добавляю себе в отдельный файл со JS.
А класс .reset я применяю к кнопке сброса формы в html. Но так не работает.
  • Вопрос задан
  • 24120 просмотров
Комментировать
Подписаться 3 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 3
OAPrilepa
@OAPrilepa
Frontend developer
Я думаю на js это легче всего сделать так:
$('.reset').on('click', function() {
    $(this).closest('form').get(0).reset();
});

Или еще проще - выводить кнопку с type==reset и будет работать нативный функционал без всякого js
<input type="reset" value="Сбросить">
Ответ написан
1 комментарий
1 комментарий
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
Прямой ресет формы:
$("#searchform")[0].reset();
Ресет формы по клику на кнопку внутри самой формы:
$('.reset').on('click', function() {
    $(this).closest('form')[0].reset();
});

[0] обращается к оригинальному элементу формы чтобы запустить метод ресета, которого нету в jQuery.
Ответ написан
Комментировать
Комментировать
Platton
@Platton Автор вопроса
Почему не работает такой вариант JSскрипта очистки input от значений value
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Стартовая страница</title>
<script>
$("input[type=button]").click(function() {
    $(this).closest('form').find(':input','option:selected')
     .not(':button, :submit, :reset, :hidden')
     .val('')
     .removeAttr('checked')
     .removeAttr('selected');    
});
</script>
</head>

<body>
<form action="" id="myform" method="post">
First Name: <input type="text" name="txtFirstName" id="txtFirstName" value="Vasy" /><br />
Last Name:  <input type="text" name="txtLastName" id="txtLastName"  value="Petrov" /><br />
<br />
<input type="button" value="Очистить">
</form>
</body>
</html>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Необходимо сверстать приложение согласно макету Figma используя React
26 апр. 2024, в 22:22
1500 руб./за проект
Написать модуль подключения матрицы Sony к ПЛИС (Verilog)
26 апр. 2024, в 21:30
15000 руб./за проект
8266 f12 требуется сделать ревью и оптимизировать работу
26 апр. 2024, в 20:42
2000 руб./за проект
Ещё заказы