Рубрики
FrontEnd

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

Поделитесь материалом

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

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, который формирует строку для таблицы, содержащую поля:

// формируем новые поля
('.plus').click(function(){
 ('.information_json_plus').before(
 '<tr>' +
 '<td>< type="text" class="form-control" name="information_json_name[]" placeholder="Название поля"></td>' +
 '<td>< type="text" class="form-control" name="information_json_val[]" placeholder="Значение поля"></td>' +
 '<td><span class="btn btn-danger minus pull-right">–</span></td>' +
 '</tr>'
 );
});
// on - так как элемент динамически создан и обычный обработчик с ним не работает
(document).on('click', '.minus', function(){
 ( 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;
}
.table td:last-child {width:10px;}
.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;
}

Результат

Добавить комментарий

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

Внес небольшое изменение в html файл, добавил все свойства внутрь

Сохранить данные

Название поля
Значение поля

+

Перед вызовом серверной процедуры с использование JQuery.ajax попытался получить значение с соответствующих полей формы используя метод JQuery serialize() (пример фрагмента кода)

var result = $(‘#form’).serialize();
console.log(result);

В результате получил следующий вывод:
0: {name: “information_json_name[]”, value: “t1”}
1: {name: “information_json_val[]”, value: “t2”}
2: {name: “information_json_name[]”, value: “t3”}
3: {name: “information_json_val[]”, value: “t4”}

В результате инициализация information_json_val[] и information_json_name[] не выполнена. Подскажите как information_json_val и information_json_name получить инициализированными?

С JQuery и созданием сайтов только начинаю разбираться. Ваш код заработал, только не могу понять назначения элементам input идентификаторв information_json_val[] и information_json_name[].

По Вашему примеру есть вопросы:
1. это просто такие названия идентификаторов чтобы потом отобрать все элементы для вызова метода each?
2. Вы планировали производить инициализацию значений идентификаторов information_json_val[] и information_json_name[]?
3. Нужно ли при добавлении и при удалении строк information_json_val[] и information_json_name[] чтобы идентификаторы у каждой строки были с уникальными значениями?

Вариант сохранения значений с полей. Получить значения input элементов для сохранения:
– производим отбор элементов с идентификаторами information_json_val[] и information_json_name[]
– методом each обходим все элементы и сохраняем значения в соответствующих элементах массива.

Подскажите я на правильном пути?

Если Вас не затруднит можно с примером программного кода.

1. Совершенно верно, я придумал information_json_val и information_json_name и использую их исключительно для того, чтобы искать конкретные элементы.
2. Не совсем понял вопрос, но если вы имеете ввиду – планировал ли я расставлять индексы в квадратных скобках, то ответ – нет, после попадания на сервер данные уже будут проиндексированы.
3. Факт того, что стоят пустые квадратные скобки говорят о том, что идентификаторы уникальны, так как наличие скобок говорит о том, что переменные information_json_val и information_json_name являются индексированными массивами, отсутствие индексов будет просто добавлять очередное значение в конец соответствующего массива.
Это аналогично добавлению элемента в массив в JS:

let value = []
value.push('Значение 1')
value.push('Значение 2')
value.push('Значение 3')

или в PHP:

$value = [];
value[] = 'Значение 1';
value[] = 'Значение 2';
value[] = 'Значение 3';

Для сохранения данных полей достаточно отправить форму и уже на сервере получить значения information_json_val и information_json_name, данные в них будут в виде нумерованных массивов.

Если бэкэнд у вас на PHP, то код будет такой:

if(!empty($_POST)&&!empty($_POST['information_json_val'])&&!empty($_POST['information_json_name'])){
  $data = array_combine($_POST['information_json_val'],$_POST['information_json_name']);
  // далее можно сохранить $data 
}

В результате вы получите ассоциативный массив вида:

Array(
  'name_1'=>'value 1',
  'name_2'=>'value 2',
  'name_3'=>'value 3',
)

Важно отметить, что мой пример не был нацелен на дальнейшую работу с полями, поэтому, чтобы после отправки формы вам удалось сохранить данные, в коде следует заменить id на name, так как данные передаются именно по атрибуту name в полях. Либо, можно не заменять, но добавить атрибут name, полностью соответствующий id.
Пожалуй, я даже обновлю код примера.