webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg

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

Есть форма, надо ловить ее изменения и менять класс кнопки 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)

Порылся в поиске, универсальных решений не нашел. Что посоветуете?
  • Вопрос задан
  • 1116 просмотров
Решения вопроса 1
@KFan
Веб-программист
Я не знаю конкретной причины но когда вы изменяете value у тегов input, необходимо вручную вызвать им обработчик change, другого способа к сожалению нет.

$("input").val("test").change(); // как пример это вызовет все известные change обработчики
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
EreminD
@EreminD
Кое-что умею
навесьте всем элементам формы класс какой-нибудь и для этого класса обработчик
$('.myEmptyClass').on('change', function(){
   $('.product-form form button[type="submit"]').removeClass('btn-success').addClass('btn-warning');
});
Ответ написан
@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'); // триггерим событие вручную
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы