Кто-нибудь сталкивался с формой, в которой нужно добавлять блок новых полей?

Question

[Азат Аллагулов]

Здравствуйте. У меня есть форма обратной связи с кнопкой "Добавить лыжника"
При клике на кнопку надо, чтобы добавился еще один блок из 3х полей (Лыжи/Сноуборд, Размер обуви и Рост).
Эти данные должны отправляться в форму (желательно по абзацам: Лыжник1, Лыжник2 и т.д.)
Подскажите пожалуйста, как можно реализовать это с помощью JS (jQuery) и PHP.
Голову себе сломал уже(

<form action="#" class="special-modal">
                    <input type="text" class="special-modal__item" placeholder="ФИО">
                    <input type="tel" class="special-modal__item" placeholder="Ваш телефон">
                    <input type="datetime" class="special-modal__item" placeholder="Дата и время приезда">
                    <div class="skier">
                        <select id="selectID">
                            <option value=”Лыжи”>Лыжи</option>
                            <option value=”Сноуборд”>Сноуборд</option>
                        </select>
                        <input type="number" class="special-modal__item" placeholder="Размер обуви">
                        <input type="number" class="special-modal__item" placeholder="Рост">
                    </div>
                    <div class="cbform-item">
                        <button type="button" id="cbsubmits" class="btn">
                            Добавить лыжника
                        </button>
                        <button type="submit" id="cbsubmits2" class="btn">
                            Отправить
                        </button>
                        <img src="img/load.gif" style="display: none;"/>
                    </div>
                </form>

Comments

[Алексей Скобкин]

lmgtfy.com/?q=dynamic+add+field+js

[MaksPaverov]

Черкани в телеграм: @westlik
Или в ВК: https://vk.com/makspaver

Answer 1

[Stalker_RED]

Добавляеете на страницу <template>

Внутри него блок с полями.

При нажатии "добавить лыжника" - берете все внутренности из этого template, клонируете, и вставляете в форму.

Answer 2

[Magrian]

вариант на чистом js

function addInputs() {
    let skier = document.getElementsByClassName("skier")[0]
    newSkier = skier.cloneNode(true)
    let container = document.getElementsByClassName("special-modal")[0]
    let cbform = document.getElementsByClassName("cbform-item")[0]

    container.insertBefore(newSkier, cbform)
}

и соответственно кнопке добавить onclick="addInputs()"

Answer 3

[Андрей]

<div class="skier">
		<select id="man_1">
			<option value=”Лыжи”>Лыжи</option>
			<option value=”Сноуборд”>Сноуборд</option>
		</select>
		<input type="number" class="special-modal__item" placeholder="Размер обуви">
		<input type="number" class="special-modal__item" placeholder="Рост">
	</div>

Берем skier, добавляем после последнего skier (.after())
меняем берем id и +1