Рубрики
FrontEnd

Динамическое создание полей (JQuery, Bootstrap)

Суть задачи: Динамически создавать по два поля, например для добавления каких либо характеристик. Первое поле будет содержать название характеристики, второе ее значение.
Например: Ширина | 20
HTML код, который необходимо написать перед добавлением полей, реализует таблицу, в которую будут вставляться новые строки. В примере, для того, что бы не задумываться о стилях используется Bootstrap.

HTML таблицы, в которую будут вставлены динамически созданные поля:

<table class="table information_json">
	<tr>
		<th>Название поля</th>
		<th>Значение поля</th>
		<th></th>
	</tr>
	<tr class="information_json_plus">
		<td></td>
		<td></td>
		<td><span class="btn btn-success plus pull-right">+</span></td>
	</tr>
</table>

JavaScript, который формирует строку для таблицы, содержащую поля:

// формируем новые поля
jQuery('.plus').click(function(){
	jQuery('.information_json_plus').before(
	'<tr>' +
		'<td><input type="text" class="form-control" id="information_json_name[]" placeholder="Название поля"></td>' +
		'<td><input type="text" class="form-control" id="information_json_val[]" placeholder="Значение поля"></td>' +
		'<td><span class="btn btn-danger minus pull-right">&ndash;</span></td>' +
	'</tr>'
	);
});
// on - так как элемент динамически создан и обычный обработчик с ним не работает
jQuery(document).on('click', '.minus', function(){
	jQuery( this ).closest( 'tr' ).remove(); // удаление строки с полями
});

Надо заметить, что данный пример создает столько переменных, сколько будет полей. Чтобы сократить количество переменных нужно в качестве id для input‘ов писать имена вида information_json_name[] и information_json_val[] соответственно. В этом случае на выходе получится 2 массива, которые можно хранить в базе данных в более компактном и удобном виде, нежели несколько разных переменных.

Заметьте, что использование Bootstrap в данном примере не обязательно, так как служит лишь для того, что бы визуализировать форму с полями.

Ниже приведены стили, которые можно использовать, если вы не подключали Bootstrap

.information_json, .information_json * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.table {
	width: 100%;
	max-width: 100%;
	margin-bottom: 20px;
	background-color: transparent;
	border-spacing: 0;
	border-collapse: collapse;
}

.pull-right {float: left;}
.form-control {
	display: block;
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.btn {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
}
.btn-danger {
	color: #fff;
	background-color: #d9534f;
	border-color: #d43f3a;
}
.btn-success {
	color: #fff;
	background-color: #5cb85c;
	border-color: #4cae4c;
}