1

Сделал форму фильтра, которая отправлет запрос php обарботчику каждый рах когда пользователь что-то меняет на форме (ставит галочку в чекбокс, меняет диапазон цен). Для реализации такого поведения привязал отпавку данных формы на событие change() на всех полях формы, как-то так:

$('form input').each(function(){

   $(this).change(function(){
     
     /*Отпаравляем данные формы обработчику*/
     formaSubmit()
   });

});

Теперь появилась задачка сделать кнопку "Сброса" формы, без перезагрузки страницы. Я сделал так:

/*перебрал все чекбоксы и с каждым сделал так:*/
	$(this).removeAttr("checked");
	$(this).change();
/*т.е. удалил флажёк и вызвал change(), если  не вызвать change(), галочка как-бы останется стоять и при отправке данных формы будут отправляться "отжатые" чекбоксы */

/*Перебрал все слайдеры (цена, размер, вес) и слеоао так*/
  $(this).val($(this).attr("data-max-value")).change();
/*тут аналогично, поставил слайдер в исходное положение (указал исходное значение) и вызвал change(), чтобы "бегунок стал согласно значению в input"*/

Но на change() у меня висит отправка данных формы, вот и получается отправка в цыкле. Всё тормозит и глючит. Как выйти из положения с минимальными временными затратами на переделку кода?

3 ответа 3

1

Переписать эту жуть...

$('form input').each(function(){
  $(this).change(function(){

Зачем each, когда можно сразу change?
А ещё лучше использовать всплытие и подписаться

$('form').on('change', 'input', function() { ... });
$(this).removeAttr("checked");

Это вообще работает только один раз. Надо убирать чекнуточть через

$(this).prop("checked", false);

Опять же, зачем проходить по всем, если jQuery это может сделать сам?

$(this).change();

А это вообще зачем? Ну поменялось состояние флажка и что?
Или там какой-то плагин для чекбоксов сделан?

$(this).val($(this).attr("data-max-value")).change();

Насколько я помню, слайдер умеет менять значение без вызова change.

И кончай постоянно оборачивать this. Есть переменные.

Но на change() у меня висит отправка данных формы, вот и получается отправка в цыкле.

Вариант 1. Отписаться от события. Для этого можно сохранить функцию или использовать неймспейс события - второй вариант лучше, первый у меня глючил. Да и удобнее второй. Этот вариант подходит, если перестраивается вся форма. На твой случай не похоже.

Вариант 2. Сохранить в переменной или data-атрибуте флаг, что сейчас идёт сброс формы. Флаг проверить в обработчике.

0

Как-то так?

//давайте заведем флаг
var justCleaningUp; 

//и поставим его в ТРУ перед очисткой формы
function CleanFormReset() {
    justCleaningUp = true;
    $(this).removeAttr("checked");
    $(this).change();
    $(this).val($(this).attr("data-max-value")).change();
    //а потом обратно в НЕ-ТРУ
    justCleaningUp = false;
}

Ну и проверяем флаг перед отправкой:

  $('form input').each(function(){

       $(this).change(function(){
         if (!justCleaningUp) {
           /*Отпаравляем данные формы обработчику*/
           formaSubmit()
         } else {
           //ничего не делаем, просто форму почистили
         }
       });

    });
0

А разве не получится просто убрать $(this).change(); и в конце функции сброса формы вызвать formaSubmit();

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.