Динамично добавяне на полета(input)
23-06-2011
Здравейте преди време ми беше наложило да направя точно това, но тогава нямах тези умения които имам сега. Наскоро(от датата на качване на урока) поредния човек попита за такъв скрипт добавящ полета и реших да направя едно уроче с новите ми знания :)

Ето какво се получи(за 5 минути... :D)


<!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>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<title>Add And Delete Fields</title>
<script>
$(function() {
var name="imeto";//Името на полетата
var max="10";//Максимален брой полета
var i=1;//брояч който брои колко полета имаме
$('#add').click(function() {//при натискане на бутона Добави...
if(i<max){//ще се проверява дали броя е малък от максимума и ако е да...
i++;//...броя се увеличава с 1...
$('#submit').before('<label for="'+name+i+'">Поле'+i+'</label><input type="text" name="'+name+i+'"/><br id="br'+i+'"/>');//...и преди submit бутона се добавя ново поле...
$('#broi').val(i);//а полето broi приема стойноста на i
}
else{//ако броя е над максимума...
alert("Максимум брой полета: "+max+"!!!");//...извеждаме това съобщение
}
return false;
});
$('#del').click(function() {//при натискането на Изтрий..
if(i!=1) {//...се проверява дали i е различно от 1(за да може винаги да има поне 1 поле)
$('label[for="'+name+i+'"],input[name="'+name+i+'"],#br'+i).remove()//...label-а,input-a и <br />-то се премахват
i--;//броя на полетата намалява с 1...
$('#broi').val(i);//...и полето broi приема стойноста на i
}
return false;
});

});
</script>
</head>
<body>
<a href="#" id="add">Добави</a> <a href="#" id="del">Изтрий</a>
<form id="forma" method="post">
<input type="hidden" value="1" id="broi" name="broi" />
<label for="imeto1">Поле1</label><input type="text" name="imeto1"/><br id="br1"/>
<input type="submit" name="submit" id="submit"/>
</form>
<br /><br />
<?php
if(isset($_POST['submit'])) {//ако е натисна бутона submit...
$broi = htmlspecialchars($_POST['broi']);//...вземаме броя на полетата..
for($g=1;$g<=$broi;$g++) {//...създаваме цикъл който
$stoinost = htmlspecialchars($_POST['imeto'.$g]);//вземаме стойноста на полето с номер $g...
echo $stoinost.", ";//...и я извеждаме
//тук може и сложите mysql заявка примерно --- mysql_query("DELETE FROM table WHERE id=$stoinost")or die(mysql_error());
}
}
?>
</body>
</html>



Демо 1
Демо 2

TIP:Можете да добавяте и други различни полета като за файлове само оправяйте id,name и for таговете :)

При проблеми или въпроси пишете в форума

Урока е авторски и забранявам копирането му в други сайтове без разрешението ми или това на администраторите!!!










/ Трябва да сте регистриран за да напишете коментар /
От: ih999
11:46 24-06-2011
Урока е авторски и забранявам копирането му в други сайтове без разрешението ми или това на администраторите!!!


Урока не е твой
От: IzKuFeLiQqQqQ
12:54 24-06-2011
Като не е мой ми покажи абсолютно същия код... Мой е урока човек ;) сам го направих да знаеш! :P
От: Ev0luti0N
15:39 24-06-2011
Има ли значение на кой е урока ?! Има ли значение и от това урока е авторски. Не мисля, че някой ако би тръгнал да го копира ще се замисли над това.

По урока: Идеята е добра, но няма да е лошо като даваш готов код поне малко да го структурираш да може като се постави да е подреден и да се вижда коя фунция от къде почва до къде свършва и т.н. И отново урока е полезен би ми помогнал и на мен. :P
От: IzKuFeLiQqQqQ
22:33 24-06-2011
Ами урока и мой и не ми пука кво мислите вие...

@Ev0luti0N демек да слагам отстъпи при if и т.н нали... е занапред така ще го правя :) аз още от началото свикнах без... но пък аз си го разбирам кодчето :D:D:D
От: webdeveloper
21:47 13-07-2011
И на мен първото ми впечатление беше "уа, колко нагъчкан и неподреден код". Поне да имаше някакви ефекти след като е с jquery, но все пак браво! :)
1