Задать вопрос
@azat_allagulov
Начинающий Frontend разроботчик, фрилансер
javascript

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

Здравствуйте. У меня есть форма обратной связи с кнопкой "Добавить лыжника"
При клике на кнопку надо, чтобы добавился еще один блок из 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>

5c42217a7d4af777213996.png
  • Вопрос задан
  • 108 просмотров
2 комментария
Подписаться 2 Простой 2 комментария
Пригласить эксперта
Ответы на вопрос 3
Stalker_RED
@Stalker_RED
Добавляеете на страницу <template>

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

При нажатии "добавить лыжника" - берете все внутренности из этого template, клонируете, и вставляете в форму.
Ответ написан
Комментировать
Комментировать
@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()"
Ответ написан
Комментировать
Комментировать
@atomrus1993 
<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
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Необходимо отверстать страницу сайта с мобильной версией и адаптивным
23 апр. 2024, в 17:59
1000 руб./в час
Разместить объявления на Авито
23 апр. 2024, в 17:47
10000 руб./за проект
Осуществлять оптовые продажи товаров для дома
23 апр. 2024, в 17:43
30000 руб./за проект
Ещё заказы