JavaScript, Formularze na stronie WWW

JavaScript: Dynamiczne dodawanie elementów formularza

JavaScript: Dynamiczne dodawanie elementów formularza Tym razem pokażemy, jak dynamicznie dodawać nowe elementy do formularza. Ze znajomością kilku funkcji okaże się to łatwe i szybkie.

Damian Wielgosik

1 2 3 »

Często zachodzi potrzeba dodania konkretnej liczby pól w formularzu (gdy chcemy wgrać wiele plików naraz). Wówczas przydaje się button/link, po kliknięciu którego w dokumencie pojawia się nowy <input type="file" />. Spróbujemy coś takiego zrealizować. Standardowo zaczniemy od gotowego pliku HTML, który nie zawiera ani jednej linijki kodu JavaScript.

[+]

HTML

 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
 3. <head>
 4.   <title>Strona z dynamicznym formularzem</title>
 5.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 6.   <!-- Nasz kod Javascript: -->
 7.   <script type="text/javascript">
 8.   ...
 9.   </script>
10. </head>
11. <body>
12.   <div><a href="#add_input" id="add_input">dodaj nowe pole typu file</a></div>
13.   <form name="add_file" enctype="multipart/form-data" method="post">
14.     <input type="file" name="file-1" />
15.     <input type="submit" value="dodaj" />
16.   </form>
17. </body>
18. </html>

Listing zwinięty - 18 linii

Aby dodać nowe pole do formularza, po kliknięciu linku dodaj nowe pole typu file należy wykonać poniższe kroki:

przechwycić zdarzenie, gdy ktoś kliknie link o id="add_input" i uruchomić specjalną funkcję, która będzie obsługiwała dodawanie nowego pola (nazwijmy ją DodajElement),
utworzyć w JavaScripcie nowy tag <input> (nowość!),
nadać mu atrybut type (w tym wypadku jest to file),
nadać unikatową nazwę (name) typu file-x, gdzie x oznacza kolejną liczbę porządkową inputów w dokumencie (aby otrzymać tę liczbę, musimy wcześniej policzyć, ile inputów zostało dodanych do formularza),
dodać nowo utworzony tag input do formularza (nowość!).

Czas na wypełnienie naszego planu. Musimy nadać właściwość onclick naszemu linkowi po załadowaniu całego dokumentu. Odpowiedzialna za to będzie funkcja Laduj.

[+]

JavaScript

1. window.onload = Laduj;
2. function Laduj()
3. {
4.   document.getElementById('add_input').onclick = DodajElement;
5. }

Listing zwinięty - 5 linii

Oczywiście można też zastosować zapis:

[+]

JavaScript

1. window.onload = Laduj;
2. function Laduj()
3. {
4.   var link = document.getElementById('add_input');
5.   link.onclick = DodajElement;
6. }

Listing zwinięty - 6 linii

Po co jednak tworzyć niepotrzebnie długi kod. Pora teraz zdefiniować nową funkcję, która wykona się po kliknięciu naszego linku i będzie odpowiedzialna za dodanie nowego elementu do formularza.

[+]

JavaScript

1. function DodajElement()
2. {
3. }

Listing zwinięty - 3 linii

Trzeba uzupełnić tę funkcję niezbędnym kodem. Najpierw należy utworzyć nowy tag (element input) w JavaScripcie. Pomoże w tym funkcja .createElement() (createElement = stwórz element). Ponieważ każdy tag jest dzieckiem całego dokumentu, używamy jej w połączeniu ze słówkiem document - document.createElement. Stworzymy więc dzięki niej nowy element input, który będzie zapisany w zmiennej o nazwie element:

[+]

JavaScript

1. function DodajElement()
2. {
3.    var element = document.createElement('input');
4. }

Listing zwinięty - 4 linii

24 lipca 2008

1 2 3 »

Powiązane publikacje

JavaScript: Limit znaków w formularzu

JavaScript: Prosta walidacja formularzy

JavaScript. Podręcznik tworzenia interaktywnych stron internetowych

Kurs JavaScript (cz. 4): Dynamiczne elementy HTML

Kurs JavaScript (cz. 3): Dynamiczne elementy HTML

Kurs JavaScript (cz. 2): Dynamiczne elementy HTML

Kurs JavaScript (cz. 1): Dynamiczne elementy HTML

Skomentuj
ten artykuł

Komentarzy: 2

niedziela, 2.05.2010 21:44/**/

Nie bo się nie zapiszą

czwartek, 10.09.2009 21:38wowi

Czy ten kod mozna uzy jako komentarze na stronę??

Zobacz wszystkie komentarze »

Autor

Damian Wielgosik

Artykuły tego autora:

» JavaScript: Limit znaków w formularzu
[INTERNET Maker]
» JavaScript: Prosta walidacja formularzy
[INTERNET Maker]
» JavaScript: Rozwijane menu
[INTERNET Maker]
» Kurs JavaScript (cz. 4): Dynamiczne...
[INTERNET Maker]
» Kurs JavaScript (cz. 3): Dynamiczne...
[INTERNET Maker]

Pozostałe publikacje

JavaScriptu w kilku słowach

Od lat żadna technologia nie zagroziła JavaScriptowi, językowi uznawanemu za zabawkę dla dzieci. Czy uda się mu zachować popularność i zapewnić źródło utrzymania kolejnym programistom?

Polecamy:

Na skróty:

Nasze serwisy:

JavaScript, Formularze na stronie WWW

JavaScript: Dynamiczne dodawanie elementów formularza

Autor

Damian Wielgosik

Pozostałe publikacje

JavaScriptu w kilku słowach

Newsletter