Динамические поля
Этот черновик висел у меня уже довольно давно, и что-то все не было желания его публиковать, но вот наконец время пришло.
Сегодня речь пойдет о динамическом добавлении полей на страницу. Представим что у нас соц. сеть (как же мне противно это словосочетание), и есть форма куда можно записать несколько мест работы и/или несколько учебных заведений в которых пришлось побывать. Так вот для того чтобы не перезагружать страницу каждый раз, нужно при нажатии на кнопку динамически добавлять поля в форму, при этом естественно поля должны быть уникальными.
Смысл того что я делаю - для каждого типа полей создаем кнопку по нажатию на которую перед ней добавляется текстовое поле с новым индексом, и имитирую нажатие для создания первого поля. Изначально идея была немного более простой: вместо bind использовался click, но так делать нельзя потому что тогда индекс полей меняться не будет. Да и вообще тут в код зашито слишком много форматирования ('дизайна') на самом деле html будет намного сложнее и все придется переделать но сама идея универсальна для любого количества динамических полей.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Динамические поля</title>
<script src="jquery-1.3.2.js"></script>
<script>
jQuery(document).ready(function($){
var fields = {grad:0, work:0} // тут перечисляешь все поля, которые можно добавлять
for(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();
}
});
</script>
</head>
<body>
<form action="" style="border:1px solid #c0c0c0;">
</form>
</body>
</html>
UPD Я понял что мне напоминает строка ]+++] из кода - BrainFuck!
Свежие комментарии