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

Question

[margarittapizza]

У меня есть форма, которая должна вносить данные о людях, которые будут играть в гольф и которые не будут играть в гольф.
То есть, форма разделена на две части.
В форме есть скрипт, если нажать на кнопку "Add a participant", то добавится ещё один блок, в котором можно вносить данные ещё одного человека. Так же их можно удалить.

У меня форма разделена на две части:
"Data about people who play Golf" и "Data about people who don't play Golf"
скрипт срабатывает корректно только в первой части, он добавляет новые поля.
Если нажать на кнопку во второй части формы, то поля добавятся в первую...

Я надеюсь что понятно объясняю)) Сам скрипт нужно как-то применить, чтобы он и туда и туда применялся независимо.

Вот накидал пример, но без CSS - https://codepen.io/michael-burenin/pen/KKwBKOw

Большое спасибо за ответ!

Answer 1

[Nikolay Matyushkin]

Так вот например

Добавил вторым параметром в функцию addField маркер, по которому определяю откуда произошёл тык. Далее в самой функции внизу определяю если тык из первого блока произошёл, туда и добавим. Если из второго, значит во второй добавим.

На одной странице не должно быть 2-х элементов с одинаковым id. Посему второй я обозвал parentId2.

Comments

[margarittapizza]

Да, отлично, это работает, вот только тут ещё одна проблема(
У меня во второй форме нету поля "T-shirt size", а оно добавляется при клике, как в первой(

[Nikolay Matyushkin]

margarittapizza, добавил условие в строке HTML-контента. Для начала обрамил эту строку специальными ковычками, а затем на месте этого select-a ("T-shirt size") вставил условие, что опять же если ткнули из первого блока, то select надо вставить в строку, если же из второго произошёл тык, значит ничего не добавлять.

Answer 2

[Константин]

да хоть так же, как и удаление у вас реализовано: передавать this в onclick, а в самой функции e.parentNode.appendChild(div); https://codepen.io/buhacker/pen/GRgBgje

Сейчас там выборка по id и два одинаковых id. JS находит первый, и с ним дальше и работает

Comments

[margarittapizza]

Да, отлично, это работает, вот только тут ещё одна проблема(
У меня во второй форме нету поля "T-shirt size", а оно добавляется при клике, как в первой(

[Шохрух Шаймардонов]

margarittapizza, значит добавьте условие для проверки. Определите какая из форм вызывает функцию и уже делайте что хотите для каждой формы

Answer 3

[Karpion]

Ну, нормально это делается примерно так:
Создаём функцию добавления записи. Среди параметров этой функции - boolean переменная, указывающая, играл ли человек в гольф. В каждой части формы - по кнопке; каждая кнопка вызывает эту функцию, передавая ей правильное указание, играл ли человек в гольф.

По ссылке - "Error 504".