Как подставить нужную форму в модальное окно в зависимости от класса таблицы из которой модальное окно вызвано?

Question

[Дамир Валиахметов]

На одной странице есть три таблицы. Есть одно модальное окно. Нужно в зависимости от того из какой таблицы вызвано модальное окно, подставить в данное модальное окно свою форму. Я так понимаю что можно это реализовать определяя класс таблицы и подставлять определенную форму.

Comments

[Ankhena]

Проще каждую форму сделать модалкой и открывать нужную.
Узнать на что кликнули - это target
https://learn.javascript.ru/event-bubbling
Удобно использовать data- атрибуты для кнопок или ссылок (не знаю на что вы кликаете)

[Дамир Валиахметов]

Ankhena, не хочется плодить кучу модалок, поэтому и возник такой вопрос, как это лаконично сделать, я мог бы и три таблицы вынести в разные три php-файла, но хочу чтоб было в одном.

[Ankhena]

Дамир Валиахметов,
Сути не меняет, к стратегии добавляется только innerHTML

[Дамир Валиахметов]

Ankhena, кликается строка таблицы

[Ankhena]

Дамир Валиахметов, без разницы,ей тоже можно присвоить data-
Но это не обязательно, можете делать соответствие строки и дива как вам удобнее.

[Дамир Валиахметов]

Ankhena, а как я к атрибуту data привяжу две разных формы?

[Ankhena]

Дамир Валиахметов,
два разных data для двух разных form

<tr data-target="form1"></tr>
<tr data-target="form2"></tr>
<form class="form1"></form>
<form class="form2"></form>

Т.е. вы можете в data- напрямую задать класс или id той form'ы с которой хотите работать в дальнейшем.
Либо можете писать соответствие, например, из .table-1 доставать цифру и получать из нее нужный класс form'ы
Либо это могут быть вообще не логичные классы, например, таблица .table-users и form .contact-form. Тогда либо писать условия если таблица такая-то, то форма такая-то, либо работать с каким-то объектом-словарем.

[Дамир Валиахметов]

Ankhena, а теперь как вставить форму при помощи js по таргету?

[Ankhena]

Дамир Валиахметов, innerHTML

Только не надо, пожалуйста, разметку этих форм писать в js.

Answer 1

[Arman]

Я наверно начал бы примерно с такого:

$('#myModal').on('show.bs.modal', function (e) {
    $(e.relatedTarget).closest('table');
})

Comments

[Дамир Валиахметов]

Мне надо определить класс таблицы и подставить html-форму в модальное окно в зависимости от класс таблицы. Это делается через if else?

[Arman]

Дамир Валиахметов, можно начать с этого