Multiple upload fields /w jQuery

[Fakeheal]

Преди няколко дена се заиграх с jQuery и по-точно как да направим форма, в която чрез натискането на бутон да ни се добавят още допълните upload полета. Също така, за да му придам малко по-представителен вид използва CSS3 бутони, от сайта, който е линкнат в демото.

Нека да дам малко разяснение около кода и как работи.

Code: Select all

$(document).ready(function(){
	$("#add_fields").click(function(){
		var inputs = $('.fileinput').length;
		var id = inputs + 1;
		$("#inputs").append('<div id="input_'+ id + '"><input type="file" name="fileUpload[]" class="fileinput" /> <a class="remove" href="#" onclick="removefield(' + id + ')">Премахни</a></div>');
	});
});

Първо проверяваме, ако бутона за добавяне на полета (на който сме му задали ID, за да го достъпваме с javascript ) е натиснат да провери колко полета има. Това става като използваме $('.fileinput').length. След това към променливата ID присъединяваме колко полета вече има и икрементираме. На 5 ред добавяме към вече създадения div#inputs новото поле придружено към линк, който го премахва.

Следващите 2 функции дават възможността на потребителя да използва линка за премахване, както и да премахне всички полета наведнъж.

Code: Select all

function removefield( id ){
	$("#input_" + id).remove();
}

function removefields()
{
	$("#inputs").empty();
}

Оригинална статия | DEMO | Свали

Aко искате още някакви уроци по уеб програмиране, пишете ЛС

[Jeff]

Супер само, че направи някъв лимит щот така мога си добавям 1000 нови полета

[Wakaflocka]

Супер само, че направи някъв лимит щот така мога си добавям 1000 нови полета

+1 !

ПТ. Браво за добрата работа, само иска един хубав дизайн е ще стане НАЙСТИНА добре!

[Charlike Mike Reagent]

Супер само, че направи някъв лимит щот така мога си добавям 1000 нови полета

+1 !

ПТ. Браво за добрата работа, само иска един хубав дизайн е ще стане НАЙСТИНА добре!

И за какво му е дизайн? Идеята е да може всеки да си го вгражда, където му трябва.
Иначе браво , колежке.

[physic]

Някой ще може ли да сложи лимит, защото не съм много по jQuery?

[Fakeheal]

Code: Select all

$(document).ready(function(){
	$("#add_fields").click(function(){
		var inputs = $('.fileinput').length;
		var id = inputs + 1;
		var max_inputs  = 5; /* Колко полета искаш */
		if(max_inputs <= id)
		{
			$("#inputs").append('<div id="input_'+ id + '"><input type="file" name="fileUpload[]" class="fileinput" /> <a class="remove" href="#" onclick="removefield(' + id + ')">Премахни</a></div>');
		}
		else
		{
			alert('Не може да добавяте повече полета!');
		}
	});
});

[physic]

Винаги като се опитам да прибавя поле, ми изписва „Не може да добавяте повече полета!“

[Fakeheal]

Логиката ми е грешна. Съжалявам, не го и тествах и стана манджа с грозде наизуст. Смени условието на:

Code: Select all

if(max_inputs >= id)

Целия код трябва да стане така:

Code: Select all

$(document).ready(function(){
   $("#add_fields").click(function(){
	  var inputs = $('.fileinput').length;
	  var id = inputs + 1;
	  var max_inputs  = 5; /* Колко полета искаш */
	  if(max_inputs >= id)
	  {
		 $("#inputs").append('<div id="input_'+ id + '"><input type="file" name="fileUpload[]" class="fileinput" /> <a class="remove" href="#" onclick="removefield(' + id + ')">Премахни</a></div>');
	  }
	  else
	  {
		 alert('Не може да добавяте повече полета!');
	  }
   });
});

Cheers,
Ив