Как поймать любые изменения в форме?

Question

[Максим Тимофеев]

Есть форма, надо ловить ее изменения и менять класс кнопки submit, написал вот такой код:

$('.product-form form').on('change','input, checkbox, radio, select, textarea, .redactor-editor',function(){
$('.product-form form button[type="submit"]').removeClass('btn-success').addClass('btn-warning');
});

Работает но не всегда. Например не срабатывает если изменения внесены с помощью js. Так же не работает на редакторе (использую imperavi)

Порылся в поиске, универсальных решений не нашел. Что посоветуете?

Comments

[Dave]

Уверен на все 100% что $('.product-form form').on('change','input, checkbox, radio, select, textarea, .redactor-editor').length не равно 0 ??

[Dave]

Элементы формы создаются динамически?

[Максим Тимофеев]

Dave: нет не динамически, length не равно 0 точно. Я же написал что все работает, но не всегда. При ручной смене текста в инпуте все отлично срабатывает. Вопрос как добраться до визуального редактора. И еще есть картинки, клик по которым меняет value одного инпута (hidden), это тоже не отрабатывает.

Answer 1

[Ильдар Гизетдинов]

Я не знаю конкретной причины но когда вы изменяете value у тегов input, необходимо вручную вызвать им обработчик change, другого способа к сожалению нет.

$("input").val("test").change(); // как пример это вызовет все известные change обработчики

Comments

[Максим Тимофеев]

спасибо, а как быть с визуальным редактором не подскажите?

[Ильдар Гизетдинов]

Максим Тимофеев: не очень понятно что конкретно не срабатывает в редакторе

[Максим Тимофеев]

Ильдар Гизетдинов: у него есть callback но не работает https://imperavi.com/redactor/docs/callbacks/change/

[Ильдар Гизетдинов]

Максим Тимофеев: Вы используете метод редактор для установки значения, или что-то иное?

[Максим Тимофеев]

Ильдар Гизетдинов: да редактор. Юзаю этот виджет: https://github.com/vova07/yii2-imperavi-widget

[Максим Тимофеев]

Ильдар Гизетдинов: грешу на то, что он не правильно подключает колбэки.

[Ильдар Гизетдинов]

Максим Тимофеев: к сожалению тут не смогу подсказать, не использую его

Answer 2

[Дмитрий Еремин]

навесьте всем элементам формы класс какой-нибудь и для этого класса обработчик

$('.myEmptyClass').on('change', function(){
   $('.product-form form button[type="submit"]').removeClass('btn-success').addClass('btn-warning');
});

Comments

[Максим Тимофеев]

Это будет работать так же как и у меня, только у меня ничего навешивать не надо.

[Максим Тимофеев]

С imperavi останется проблема и с элементами value которых изменено через js

Answer 3

[GreatRash]

Как я понимаю, вы не можете триггерить события для элементов формы ибо у вас нет доступа к ним. В таком случае единственный выход, который я вижу, это интервалом отслеживать изменения в форме (hidden-поля в том числе):

var form = {};

form.$el = $('form');
form.oldData = form.$el.serialize();

form.isDataChanged = function() {
  var newData = form.$el.serialize();

  if (form.oldData !== newData) {
    form.oldData = newData;
    return true;
  }

  return false;
};

window.setInterval(function() {
  if (form.isDataChanged()) {
    // форма изменилась - дизейблим кнопку или чо там
  }
}, 250); // разумный интервал

UPD: Если же доступ всё же есть, то лучше всего триггерить нужное событие там, где скриптом что-то вставляется:

$('form :input').on('change', function() {
  // форма изменилась - дизейблим кнопку или чо там
});

// ...
// где-то дальше в коде вставляем в форму данные скриптом
$('form input[type="text"]').eq(0).val('новое значение').trigger('change'); // триггерим событие вручную

Comments

[Максим Тимофеев]

Ильдар Гизетдинов уже подсказал правильное решение спасибо