Плагин для jquery — saveform

В библиотеке jQuery UI есть отличный виджет, это dialog. Он позволяет создавать красивые и многофункциональные диалоговые окна для вашего интерфейса. Но у него есть одна серьезная проблема, которая, к сожалению практически нигде не освящается. Данная проблема состоит в следующем: если в диалоговом окне будут расположены некоторые поля html формы, то при попытке отправки формы, эти самые поля не будут отправлены обработчику. Это вы, что то сделали не так? Возможно, вы спросите себя. Но на самом деле все гораздо проще.

А дело все в том, что html элемент div (предполагается, что этот тип элемента является областью диалогового окна), выпадает из html тега form. Иными словами, при использовании виджета ui dialog, DOM модель перестраивается. Ну и соответственно ни о какой передаче полей формы не может быть и речи. Поэтому в связи с такой не утешительной ситуацией, было принято решение о создании плагина, который впоследствии получил незамысловатое имя – saveform.

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

<form>
...
</form>

Плагин состоит из всего лишь трех опций:

block – значением этого параметра должен являться селектор элемента, который будет содержать копии полей формы.

expr – в качестве значения этого параметра выступает строка с полным или частичным названием полей формы. Предполагается, что в названии у всех полей формы имеются общие начальные символы.

isEmpty – этот параметр отвечает за сохранение пустых или заполненных полей формы и по умолчанию содержит значение false, что является запретом на сохранение незаполненных полей. Для того чтобы не игнорировать пустые поля, необходимо его установить в значение true. Стоит заметить, что невыбранные поля формы с типами: radio или checkbox, не сохраняются при любом указанном значении данного параметра.

Разберем пример по использованию плагина для диалогового окна следующего вида:

$(document).ready(function() {
		
	$("#dialog").dialog({
		autoOpen: true,
		resizable: false,
		width: 320
		buttons: [
			{
				text: "Ok",
				click: function() {						
					$( this ).dialog( "close" );
					// Подключение плагина
					$( this).SaveField({
						block: '#field-block',
						expr: 'User',
					});
				}
			}
		]
	});
		
	$( "#dialog-open" ).click(function( event ) {
		$( "#dialog" ).dialog( "open" );
		event.preventDefault();
	});	
	
});

Активация плагина saveform происходит при клике на кнопке расположенной в форме диалога. Блок, который выступает в роли буфера для сохранения дублей полей формы, имеет атрибут id c идентификатором field-block. И этот же идентификатор должен быть указан в качестве селектора при инициализации плагина у параметра block. Поскольку все поля формы заключены в массив с названием “User“, то и параметр expr должен содержать соответствующую текстовую маску. Вы можете скачать как сам плагин так и демо проект.