Обнаружить изменение в поле <input>, управляемое ползунком - PullRequest
Новая
       16

Обнаружить изменение в поле <input>, управляемое ползунком

0 голосов
/ 01 апреля 2020

У меня есть форма с ползунком с двумя ручками: 

<form id="advancedSearch" action="modules/advanced_search.xq" method="post" onsubmit="advancedSearch(this);">

<div class="slider" id="slider" data-aria-valuemin="1725" data-aria-valuemax="1786" data-slider="data-slider" data-start="1725" data-end="1786" data-initial-start="1725" data-initial-end="1786">

<span id="handle1" class="slider-handle" data-slider-handle="data-slider-handle" role="slider" tabindex="1" aria-controls="dateFrom"/>

<span id="handle2" class="slider-handle" data-slider-handle="data-slider-handle" role="slider" tabindex="1" aria-controls="dateTo"/>

[...]
<input type="number" max="1786" min="1725" id="dateFrom" name="dateFrom"/>
</div>
<div class="cell small-2">
<input type="number" max="1786" min="1725" id="dateTo" name="dateTo"/>
[...]
</form>

Все работает хорошо. Теперь я хотел бы вызвать функцию advancedSearch () при изменении дескриптора ползунка без необходимости каждый раз нажимать «submit».

Добавление oninput='advancedSearch(this.form); return false;' к элементам <input> делает только хитрость если я изменю числа внутри поля <input>. При использовании ползунков, хотя document.getElementById('dateFrom').value меняется, функция не активируется. onchange также не работает. Как я могу вызвать функцию при изменении номера с помощью самого ползунка, кроме изменения чисел внутри поля <input> вручную?

Добавление отдельной функции: 

document.getElementById('dateFrom').addEventListener('change', (event) => {
var formData = document.getElementById('advancedSearch')

advancedSearch(formData)
});

возвращает тот же результат.

1 Ответ

1 голос
/ 01 апреля 2020

Спасибо Прике sh Савле за указание на событие changed.zf.slider. К сожалению, при реализации этого с: 

$("#slider").on('change changed.zf.slider', function(){ { var formData = document.getElementById('advancedSearch') advancedSearch(formData); }});

страница вызывает функцию при ее загрузке (либо обновление, либо посадка там). После некоторого устранения неполадок я не смог найти причину для этого. В конце я добавляю этот код: 

document.querySelector('.slider').addEventListener("click", function () {
            advancedSearch(document.getElementById('advancedSearch'));
        });
        document.getElementById('dateFrom').addEventListener("input", function () {
            advancedSearch(document.getElementById('advancedSearch'));
        });
        document.getElementById('dateTo').addEventListener("input", function () {
            advancedSearch(document.getElementById('advancedSearch'));
        });

, который делает то, что я хочу, хотя я ценю, что это не самое элегантное решение.

...