Как при закрытии модального окна прятать input'ы?

Question

[Павел Воронюк]

Разбираю Modal в Bootstrap и хочу сделать следующее:

При клике на определенную кнопку, показать только нужные input'ы.

То есть, нажав на кнопку, например DRIVER, показать все input'ы с классом driver. Это вроде сделал. Но если форму отправить или закрыть, то эти input'ы нужно скрыть, то есть убрать добавленный класс. Почему класс не удаляется?

Answer 1

[0xD34F]

Пытаясь удалить класс, вы зачем-то указываете точку в начале его имени.

Непонятно, зачем нужны отдельные классы для каждого типа input'ов. Достаточно одного общего:

#exampleModal {
  .form-group {
    display: none;

    &.active {
      display: block;
    }
  }
}

Закрытие диалога может происходить не только по нажатию на кнопки в футере и хедере, а ещё и по нажатию на оверлей - этот случай вы не обрабатываете. Обработчик закрытия вы назначаете при каждом открытии диалога, т.е., открыли диалог 10 раз - у кнопки будет 10 обработчиков.

Вместо того, чтобы ловить клики где бы то ни было, следует подписаться на событие закрытия диалога:

$('#exampleModal').on({
  'show.bs.modal'(e) {
    const recipient = e.relatedTarget.dataset.whatever;

    $('.modal-title, button[type="submit"]', this).text(`Add ${recipient} in system`);
    $(`.${recipient}`, this).addClass('active');
  },
  'hide.bs.modal'() {
    $('.form-group.active', this).removeClass('active');
  },
});

Или, другой вариант - при открытии диалога скрывать все input'ы перед показом нужных:

$('#exampleModal').on('show.bs.modal', function(e) {
  const recipient = e.relatedTarget.dataset.whatever;

  $('.modal-title, button[type="submit"]', this).text(`Add ${recipient} in system`);
  $('.form-group', this).removeClass('active').filter(`.${recipient}`).addClass('active');
});

Косяк, не относящийся к проблеме, но упомянуть стоит - одинаковые id у input'ов. Во-первых, id должны быть уникальны, в этом как бы и есть их смысл. Во-вторых, при одинаковых id клик по любому label'у вместо соответствующего ему input'а устанавливает фокус на первый с таким id.

Исправленный вариант можно глянуть здесь.

Comments

[Павел Воронюк]

Спасибо за разбор ошибок! Учусь JavaScriptu методом проб), а ваш код возьму на заметку.

Но вопрос) у меня ваш вариант постоянно перезагружает страницу на codepen ) это может быть ошибка в коде?

[0xD34F]

Павел Воронюк, не знаю, что это может быть. Сам с таким иногда сталкиваюсь... при использовании Фаерфокса. Но поскольку пользуюсь в основном Хромом, никогда не интересовался, в чём причина.

[Павел Воронюк]

0xD34F, вот а у меня в Хроме такое) впервые увидел. Спишем на баги в macOS Mojave. Теперь в Хроме и чекбоксов нету :)