piątek,
Klonowanie węzłów
Język JavaScript udostępnia mechanizmy pozwalające klonować węzły drzewa DOM. Na kopiach można operować w ten sam sposób jak w przypadku pobranych lub od nowa utworzonych elementów. Otwiera to przed budowniczym aplikacji spore nowe możliwości.
Prezentowany przykład to uproszczony formularz służący do dodawania pracowników. Czasami zachodzi potrzeba wpisania jednego nowego pracownika, a czasami kilku, w związku z tym podczas projektowania formularza nie można przewidzieć, ile będzie potrzebnych pól. Problem można oczywiście rozwiązać, dodając pracowników pojedynczo, jednak istnieje także możliwość zbudowania formularza, w którym pola są dodawane dynamicznie, w zależności od potrzeb. W prezentowanym przykładzie nowe pole można uzyskać za pomocą przycisku „Następny”. W rzeczywistej aplikacji lepszym rozwiązaniem byłby zdefiniowany skrót klawiszowy, aby nie zwiększać objętości kodu przykładu, w demonstracji zrezygnowano z tej opcji.
Podpowiedź jak obsłużyć po stronie serwera dane wysłane z formularza o zmiennej liczbie pól, znajdziesz w materiale Kontrola poprawności danych.
Demonstracja
Dodaj nowych pracowników:
Kod HTML
Kod HTML to standardowy formularz HTML. Należy zwrócić uwagę na konwencję przyjętą do nazywania pól formularza (atrybut name), pozwoli ona tworzyć kopie bez potrzeby zmiany nazw i zapewni możliwość sprawnego przetworzenia danych po stronie serwera.
<p>Dodaj nowych pracowników:</p>
<form action="" method="post" id="ex-form">
<ol>
<li>
<label>Nazwisko: <input type="text" name="lname[]"></label>
<label>Imię: <input type="text" name="fname[]"></label>
</li>
</ol>
<input type="button" value="Następny">
<input type="submit" value="Zapisz dane">
</form>
Kod JavaScript
Klonowanie węzłów DOM realizowane jest za pomocą metody cloneNode(). Kopiowany jest element li zawierający dwa pola do wpisywania danych. Z uwagi na to, że użytkownik mógł już wprowadzić do nich dane, w kopii należy ustawić ich atrybuty value na puste wartości. W razie potrzeby w podobny sposób można modyfikować inne własności klonowanego elementu. Kopia dołączana jest do elementu nadrzędnego przy pomocy metody appendChild(). Ostatnia operacja to niewielkie usprawnienie pracy użytkownika, z pomocą metody focus() automatycznie aktywowane jest odpowiednie pole do wpisywania danych.
document.querySelector('#ex-form [type=button]').addEventListener('click', function() {
var li = document.querySelector('#ex-form li').cloneNode(true);
li.querySelector('input').value = '';
li.querySelectorAll('input')[1].value = '';
document.querySelector('#ex-form ol').appendChild(li);
document.querySelector('#ex-form li:last-child input').focus();
})
