Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.09.2018, 22:55
Аспирант
Отправить личное сообщение для dasha862 Посмотреть профиль Найти все сообщения от dasha862
 
Регистрация: 31.03.2016
Сообщений: 36

Появление кнопки Очистить после выбора/заполнения поля
Здравствуйте.

Имеется форма с разными полями: checkbox,radio,select,text. Span очищает форму.
Подскажите, пожалуйста, как сделать чтобы Span был виден после того, как любое из полей выбрано/заполнено (и соответственно пропадал, если поле не выбрано).

<form id="block_search" name="block_search" method="GET" action="/search/">
<div><input id="must1" name="must1" value="ON" type="checkbox"><label for="must1">Фотографии</div>
<div><input id="f1" value="0" name="f1" type="radio"><label class="field_label" for="f1">Возможен торг</label></div>
<div><select id="bs_44" class="form-control" size="1" name="f_44"><option value="1">Гибрид</option><option value="2">Электро</option></select></div>
<div><input id="bs_16" class="form-control" placeholder="Адрес сайта" name="f_16" value="" type="text"></div>
</form>
<span class="reset">Очистить</span>

$(".reset").click(function(){$("#block_search")[0].reset();
Ответить с цитированием
  #2 (permalink)  
Старый 18.09.2018, 23:51
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<form id="block_search" name="block_search" method="GET" action="/search/">
		<div><input id="must1" name="must1" value="ON" type="checkbox"><label for="must1">Фотографии</div>
			<div><input id="f1" value="0" name="f1" type="radio"><label class="field_label" for="f1">Возможен торг</label></div>
			<div><select id="bs_44" class="form-control" size="1" name="f_44"><option value="1">Гибрид</option><option value="2">Электро</option></select></div>
			<div><input id="bs_16" class="form-control" placeholder="Адрес сайта" name="f_16" value="" type="text"></div>
		</form>
		<span class="reset" style="display:none">Очистить</span>

		<script>
block_search.oninput = e => document.querySelector('.reset').style.display =
 [].some.call(document.querySelectorAll('#block_search input'), el=> el.type == 'text'? el.value.length : el.checked)? 'block':'none';
		</script>
Ответить с цитированием
  #3 (permalink)  
Старый 18.09.2018, 23:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от j0hnik
el.value.length
может
el.value.trim()
Ответить с цитированием
  #4 (permalink)  
Старый 19.09.2018, 00:10
Аспирант
Отправить личное сообщение для dasha862 Посмотреть профиль Найти все сообщения от dasha862
 
Регистрация: 31.03.2016
Сообщений: 36

В случае с select span не появляется.
Ответить с цитированием
  #5 (permalink)  
Старый 19.09.2018, 00:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от dasha862
В случае с select span не появляется.
Гибрид это не выбор?
Ответить с цитированием
  #6 (permalink)  
Старый 19.09.2018, 00:46
Аспирант
Отправить личное сообщение для dasha862 Посмотреть профиль Найти все сообщения от dasha862
 
Регистрация: 31.03.2016
Сообщений: 36

Да, моя ошибка, должно быть так:
<select id="bs_44" class="form-control" size="1" name="f_44">
<option value="">Выберите категорию</option>
<option value="1">Гибрид</option>
<option value="2">Электро</option>
</select>

При выборе Гибрид или Электро span не появляется.
Ответить с цитированием
  #7 (permalink)  
Старый 19.09.2018, 01:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

dasha862,
block_search.oninput = e => document.querySelector('.reset').style.display =
 [].some.call(document.querySelectorAll('#block_search input, #block_search select'), el=> (el.type == 'text' || el.tagName == 'SELECT')? el.value.length : el.checked)? 'block':'none';
Ответить с цитированием
  #8 (permalink)  
Старый 19.09.2018, 02:03
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от рони Посмотреть сообщение
может
el.value.trim()
зачем там пробелы, пусть тоже отчищаются =)
Ответить с цитированием
  #9 (permalink)  
Старый 19.09.2018, 13:12
Аспирант
Отправить личное сообщение для dasha862 Посмотреть профиль Найти все сообщения от dasha862
 
Регистрация: 31.03.2016
Сообщений: 36

Большое Вам Спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Исчезновение кнопки после нажатия ham134 Общие вопросы Javascript 5 10.05.2021 09:46
Изменение value поля после событии change saxap jQuery 3 22.02.2013 10:55
значение текстового поля после CKeditor styleroom Events/DOM/Window 2 24.08.2012 13:05
Появление ссылки после нажатии на другой ссылки Изучаю_JS Элементы интерфейса 4 17.12.2011 12:10
После анимации очистить очередь virtus jQuery 2 19.12.2009 11:35