Произвольное число полей в веб-форме

Иногда мы не знаем, сколько именно данных пользователь захочет сообщить, но дать ему возможность выбирать нужно. Скажем, требуется получить несколько номеров телефонов из необязательных полей, или сформировать опрос с неизвестным заранее числом вариантов.

Один из возможных вариантов решения — получать информацию в сыром виде и обрабатывать ее согласно определенным алгоритмам. Допустим, поместить слова в массив и пройти через него регулярным выражением на сервере.
Можно использовать сложный плагин jQuery и оперировать объектами JSON.
Или можно построить простой клиентский скрипт для отрисовки массива полей по флагам.

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

Далее следует придумать механизм добавления полей. В простейшем случае мы формируем html-шаблон поля и добавляем его в определенный блок нужное число раз. Обратная сторона этой простоты — невозможность удалить какое-то определенное поле. Потому что как скрипт узнает, в какой именно блок мы ткнули, желая убрать его из списка? Можно передавать идентификатор строки функции разбора DOM, которая пройдет по содержимому целевого блока до нужного узла и отсоединит его. Или инициализировать счетчик и использовать флаги: если значение — 1, то такой блок нам нужен, а если 0 — давайте его удалим.

Кроме того, стоит обрабатывать и добавление и удаление полей одной функцией, для чего достаточно научить ее отличать плюс от идентификатора.

Посмотрим на код:

	<script> 		var i = 0; // Инициализируем счетчик 		var emp_arr = new Array(); 		function emp_list(flag, emp_arr) 		{ 			var emp_div = document.getElementById('employees'); // Находим целевой элемент 				 			emp_div.innerHTML = ''; // Очищаем целевой элемент  			if('+' == flag) 			{ 				i++; 				emp_arr[i] = 1; // Добавляем в массив сотрудников 			} 			else 			{	 				var sum = 0; // Не позволяем удалять последний элемент - если сумма ключей в массиве равна единице, ничего не делаем 				for(var z=0; z<=emp_arr.length; z++) 				{ 						if(1 == emp_arr[z]) {sum++;} 				}					 				if(1 != sum) {emp_arr[flag] = 0;} 			} 			for(var z=0; z<=emp_arr.length; z++) 			{ 				// Для дальнейшей обработки данных на сервере передаем элементы с именами в виде массивов. Затем сможем получить их значения при переборе $_POST 				var emp_field='<p><input type="text" name="family_name[]" value="Фамилия" size="20" /> <input type="text" name="first_name[]" value="Имя" size="20" /> <input type="text" name="fathers_name[]" value="Отчество" size="20" /> | Номер мобильного телефона: <input type="text" name="tel_num[]" value="+7(999) 999-9999" size="20" /> | <span class="link" onclick="emp_list(\''+z+'\', emp_arr);">Удалить</span></p>'; 				if(1 == emp_arr[z]) {emp_div.innerHTML+=emp_field;}  			} 		} 	</script> 

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

	<div id="employees"> 		<!-- Здесь будут поля формы --> 		<script> 			emp_list('+', emp_arr); 		</script> 	</div> 	<p><span class="link" onclick="emp_list('+', emp_arr);">Добавить сотрудника</span></p> 

Стили для кнопок:

	<style> 	.link { color: #0069c4; cursor: pointer;} 	.link:hover {text-decoration: underline;} 	</style> 

Готово

<!DOCTYPE html> <html>   <head>          <title>Произвольное число полей в веб-форме</title> 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 	 	<style> 	.link { color: #0069c4; cursor:pointer;} 	.link:hover {text-decoration:underline;} 	</style> 	 	<script> 		var i = 0; // Инициализируем счетчик 		var emp_arr = new Array(); 		function emp_list(flag, emp_arr) 		{ 			var emp_div = document.getElementById('employees'); // Находим целевой элемент 				 			emp_div.innerHTML = ''; // Очищаем целевой элемент  			if('+' == flag) 			{ 				i++; 				emp_arr[i] = 1; // Добавляем в массив сотрудников 			} 			else 			{	 				var sum = 0; // Не позволяем удалять последний элемент - если сумма ключей в массиве равна единице, ничего не делаем 				for(var z=0; z<=emp_arr.length; z++) 				{ 						if(1 == emp_arr[z]) {sum++;} 				}					 				if(1 != sum) {emp_arr[flag] = 0;} 			} 			for(var z=0; z<=emp_arr.length; z++) 			{ 				// Для дальнейшей обработки данных на сервере передаем элементы с именами в виде массивов. Затем сможем получить их значения при переборе $_POST 				var emp_field='<p><input type="text" name="family_name[]" value="Фамилия" size="20" /> <input type="text" name="first_name[]" value="Имя" size="20" /> <input type="text" name="fathers_name[]" value="Отчество" size="20" /> | Номер мобильного телефона: <input type="text" name="tel_num[]" value="+7(999) 999-9999" size="20" /> | <span class="link" onclick="emp_list(\''+z+'\', emp_arr);">Удалить</span></p>'; 				if(1 == emp_arr[z]) {emp_div.innerHTML+=emp_field;}  			} 		} 	</script> 	   </head>   <body>    	<h1>Информация о сотрудниках</h1>  	<div id="employees"> 		<!-- Здесь будут поля формы --> 		<script> 			emp_list('+', emp_arr); 		</script> 	</div> 	<p><span class="link" onclick="emp_list('+', emp_arr);">Добавить сотрудника</span></p>      </body> </html> 

Для повышения гибкости можно избавиться от указания на функциональность в именах переменных и предоставлять функции больше аргументов — допустим, идентификатор целевого блока и шаблон вывода. В таком случае использовать ее можно будет для динамического добавления любых блоков и полей.