Dynamiczne dodawanie pól formularza

autor: Mateusz Pilszek, ostatnia modyfikacja: 2007-04-01

szukaj: createElement className setAttribute appendChild js

Napiszemy skrypt, który na życzenie użytkownika doda kolejne elementy formularza bez przeładowania strony. W skrypcie zostanie wykorzystany obiektowy model dokumentu (Document Object Model) i możliwości języka JavaScript. Jeżeli nie wiesz, o co chodzi, przybliżą Ci to poniższe zrzuty:

Po kliknięciu przycisku „Załącz kolejny plik” pojawi się nowe pole służące do uploadowania plików na serwer:

Wszystko zależy od Twojej wyobraźni – na przykład możesz zamiast pól typu file wykorzystać pola tekstowe.

Do dzieła!

Zacznijmy od stworzenia formularza w dowolnym miejscu strony (w obrębie sekcji body):

<form action="jakisplik.php" method="post">
	<div id="pliki">
		<input type="file" name="plik" class="upload" />
	</div>
	<div>
		<input type="button" value="Załącz kolejny plik" onclick="dodaj_element('pliki');" />
		<input type="submit" value="Wyślij" />
	</div>
</form>

Atrybuty znacznika <form> należy uzupełnić wedle uznania. Stworzona została warstwa o identyfikatorze „pliki”. To właśnie wewnątrz niej będą się znajdowały dynamicznie dołączane pola formularza. Na początek dodamy tam jeden znacznik <input>, który będzie domyślnie wyświetlany po załadowaniu strony. Jest on przypisany do klasy upload – w dalszej części porady wyjaśnię, dlaczego.

Dalej umieściłem przycisk „Załącz kolejny plik” i zdefiniowałem dla niego zdarzenie onclick, które wywołuje funkcję dodaj_element. Jako argument podajemy identyfikator „kontenera”, który zawiera elementy formularza. W tym przypadku jest to element o identyfikatorze „pliki”.

Czas na stworzenie kodu JavaScript, który wykona wszystkie operacje. Do sekcji head dopisujemy więc poniższy kod:

<script type="text/javascript">
<!--
function dodaj_element(kontener){
	var znacznik = document.createElement('input');
	znacznik.setAttribute('type', 'file');
	znacznik.setAttribute('name', 'plik');
	znacznik.className = 'upload';
	var kontener = document.getElementById(kontener);
	kontener.appendChild(znacznik);
}
//-->
</script>

Funkcja dodaj_element tworzy nowy znacznik (createElement), ustala dla niego odpowiednie atrybuty (setAttribute) i przypisuje go do klasy (className). Następnie odwołuje się do „kontenera”, który zawiera elementy formularza (getElementById) i umieszcza stworzony znacznik jako jego ostatnie dziecko.

Już prawie koniec...

Wszystko powinno już działać, ale pozostaje mały szczegół – dynamicznie dodawane elementy umieszczane są w jednej linii. My natomiast chcemy, aby pola znajdowały się jedno pod drugim. Dlatego właśnie przypisaliśmy je do klasy upload. Wystarczy teraz zdefiniować odpowiedni kod CSS. Do sekcji head dodajemy więc kod:

<style type="text/css">
<!--
input.upload { display: block; }
-->
</style>

Skrypt powinien działać poprawnie w każdej współczesnej przeglądarce internetowej.

Mateusz Pilszek

szukaj: createElement className setAttribute appendChild js

Osoby czytające tę publikację przeglądały również:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!