Как отследить изменения данных в форме при использовании jquery-nice-select?

Question

[Дмитрий Тарасов]

Как отследить изменения данных в форме?
Есть форма, хочу чтобы при изменении каких-либо параметров форма отправила бы их.
Код здесь https://codepen.io/fast-je/pen/qVmrEx
Проблема ещё в том, что этот код вообще никак не работает, потому что подключил плагин (jquery-nice-select), который изменяет select, из-за этого я даже не могу отследить изменения в select.

$(document).ready(function() {
  $('select').niceSelect();
});

(function(){
    document.addEventListener("DOMContentLoaded", function () {
        var select = document.querySelector("div.task-filter__order-select");

        select.addEventListener("change", function(){
            console.log(select.value);
        });
    });
})();

Как отследить изменения формы и отправить их (ну или просто вывести в консоль)?

Answer 1

[0xD34F]

Во-первых, DOMContentLoaded отрабатывает раньше, чем ready. Так что элемента, к которому вы пытаетесь прицепить обработчик события, ещё нет (его создаёт nice-select).

Во-вторых, прицепить обработчик события вы пытаетесь к div'у. Откуда там возьмётся событие change? Да ниоткуда.

В-третьих, события jquery и нативные - не одно и то же.

Так что надо подключать обработчик к select'у с помощью jquery. Можно сразу же после инициализации плагина:

$('select').niceSelect().change(function() {
  console.log(this.value);
});

Если же вести речь про всю форму, тогда слушать событие change следует на форме же (а ещё не хватает атрибутов name у select'ов - надо добавить):

$('form').change(function(e) {
  // смотрим только что введённое значение
  console.log(e.target.value);

  // данные всей формы
  console.log($.param($(this).serializeArray()));
});