Как лучше всего сделать функцию добавления нескольких блоков?

Question

[Дима Паутов]

Добрый вечер! Помогите организовать или направьте на верный путь. У меня стоит задача, при нажатии на кнопку добавлять в форму группу с новыми полями.

Вот код верстки, которую нужно вставлять:

<div class="formGroup">
				<div class="row">
					<div class="col4 colms12">
						<label for="" class="fieldName">
							Поступление
						</label>
					</div>
					<div class="col8 colms12">
						<div class="row">
							<div class="col6">
								<input type="text" class="field" placeholder="Месяц">
							</div>
							<div class="col6">
								<input type="text" class="field" placeholder="Год">
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="formGroup">
				<div class="row">
					<div class="col4 colms12">
						<label for="" class="fieldName">
							Увольнение
						</label>
					</div>
					<div class="col8 colms12">
						<div class="row">
							<div class="col6">
								<input type="text" class="field" placeholder="Месяц">
							</div>
							<div class="col6">
								<input type="text" class="field" placeholder="Год">
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="formGroup">
				<div class="row">
					<div class="col4 colms12">
						<label for="" class="fieldName">
							Название организации
						</label>
					</div>
					<div class="col8 colms12">
						<input type="text" class="field">
					</div>
				</div>
			</div>

			<div class="formGroup">
				<div class="row">
					<div class="col4 colms12">
						<label for="" class="fieldName">
							Должность, должностные 
							обязанности
						</label>
					</div>
					<div class="col8 colms12">
						<textarea rows="5" class="field"></textarea>
					</div>
				</div>
			</div>

			<div class="formGroup">
				<div class="row">
					<div class="col4 colms12">
						<label for="" class="fieldName">
							Достижения
						</label>
					</div>
					<div class="col8 colms12">
						<input type="text" class="field">
					</div>
				</div>
			</div>

			<div class="formGroup">
				<div class="row">
					<div class="col4 colms12">
						<label for="" class="fieldName">
							Причина увольнения
						</label>
					</div>
					<div class="col8 colms12">
						<input type="text" class="field">
					</div>
				</div>
			</div>');

Вроде все просто, взять записать в переменную эту кучу html'ля и вставлять в нужный блок. Но как-то это выглядит очень громоздко. К тому же встаёт задача, а как делать так, что бы имена полей, которые будут приходить в запросе не дублировались?

Answer 1

[IceJOKER]

Изначально один блок вставляете в страницу и скрываете, а дальше уже с ним работает - копируем, меняем, вставляем и т.д.

Comments

[Дима Паутов]

Это идея, спс! Но изначально уже есть 1 группа. Значит клонируем уже имеющуюся группу, и к имеющимся в группе именам полей добавляем инкремент(чтоб не повторять), в зависимости от того, сколько уже есть групп в форме. Примерно так я думаю.

[Stalker_RED]

Дима Турков: Лучше изначально иметь пустой, скрытый блок. Тогда не нужно будет заморачиваться с очисткой формы от значений, например. А первую группу выводить тем-же способом, каким будут добавляться остальные.

[Дима Паутов]

Stalker_RED: а как тогда быть с отправкой? Ведь по логике в запросе будут лежать и эти пустые, скрытые поля. Разве нет? А если стоит атрибут required? Браузер не даст отправить пустые, скрытые поля!

[Stalker_RED]

Дима Турков: Насколько я помню, на скрытых полях required не срабатывает.

[Дима Паутов]

Stalker_RED: работает, ещё как!