Javascript-форум - Появление кнопки Очистить после выбора/заполнения поля

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Появление кнопки Очистить после выбора/заполнения поля (https://javascript.ru/forum/misc/75284-poyavlenie-knopki-ochistit-posle-vybora-zapolneniya-polya.html)

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

Здравствуйте.

Имеется форма с разными полями: 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();

<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>

Цитата:

Сообщение от j0hnik

el.value.length

может

el.value.trim()

В случае с select span не появляется.

Цитата:

Сообщение от dasha862

В случае с select span не появляется.

Гибрид это не выбор?

Да, моя ошибка, должно быть так:

<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 не появляется.

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';

Цитата:

Сообщение от рони (Сообщение 495019)

может

el.value.trim()

зачем там пробелы, пусть тоже отчищаются =)

Большое Вам Спасибо!