Динамические поля

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

Сегодня речь пойдет о динамическом добавлении полей на страницу. Представим что у нас соц. сеть (как же мне противно это словосочетание), и есть форма куда можно записать несколько мест работы и/или несколько учебных заведений в которых пришлось побывать. Так вот для того чтобы не перезагружать страницу каждый раз, нужно при нажатии на кнопку динамически добавлять поля в форму, при этом естественно поля должны быть уникальными.

Смысл того что я делаю — для каждого типа полей создаем кнопку по нажатию на которую перед ней добавляется текстовое поле с новым индексом, и имитирую нажатие для создания первого поля. Изначально идея была немного более простой: вместо bind использовался click, но так делать нельзя потому что тогда индекс полей меняться не будет. Да и вообще тут в код зашито слишком много форматирования (‘дизайна’) на самом деле html будет намного сложнее и все придется переделать но сама идея универсальна для любого количества динамических полей.



jQuery(function($){
	var fields = {grad: 0, work: 0} // тут перечисляешь все поля, которые можно добавлять
	for(var f in fields){
		// создаем кнопку которая будет добавлять новые поля типа f
		$("<input type='button'/>").attr({value:'добавить '+f}).bind("click", f, function(e){ 
		// поле типа f с индексом fields[f] вставляется перед кнопкой которая его создала
		$("<input type='text'/>").attr({name:e.data+'['+fields[e.data]+++']',value:e.data+' '+fields[e.data]}).insertBefore(this).before('<br />'); 
		}).appendTo('#form').after('<br />').click();
	}
});


<form action="" style="border:1px solid #c0c0c0;"></form>

UPD Я понял что мне напоминает строка ]+++] из кода — BrainFuck!

6 Комментарии “Динамические поля

  1. помогите пожалуйста решить одну задачу, http://www.linkexchanger.su/jquery_articles/cascadeSelect.html вот тут находится пример на динамичные списки, а как можно сделать так чтобы вместо последнего списка(модель) создались динамичные checkbox(и)? Заранее спасибо))

  2. Вам надо будет переписать функцию adjustModel. Едиственное я не понимаю почему вы спрашиваете об этом меня а не автора кода?

  3. нужно использовать document.createElement? логику понимаю, а написать код не получается, а у автора статьи времени или желания нет помочь))

  4. а в инете очень мало информации об динамичных checkbox(ах)((

  5. Лучше использовать jQuery. почитайте документацию на офицальном сайте, а потом идите на форум pyha.ru там вам помогу или я или еще кто-то

Комментарии закрыты