Obsługa formularzy
Za pomocą JavaScript można w pełni kontrolować formularze na stronach, np. sprawdzać poprawność danych umieszczonych w formularzach, zmieniać zachowanie elementów formularza (np. pozwalać na wpisywanie tylko cyfr w polu tekstowym) oraz dynamicznie pokazywać i ukrywać jego części.
Odnalezienie formularza
Można skorzystać ze zwykłych metod DOM (getElementById()
, nextSibling()
, itd.), ale W3C DOM posiada też specjalne metody dostępu do formularzy, które w praktyce często są łatwiejsze w użyciu.
Kolekcja document.forms
zawiera wszystkie formularze na stronie.
document.forms[0]
Obiekt reprezentujący pierwszy element<form>
na stronie
Jeśli formularz ma atrybut name
, to można go wybrać po nazwie w kolekcji document.forms
:
<form name="nazwaformularza">
...document.forms['nazwaformularza']
lubdocument.forms.nazwaformularza
Dla nazw zawierających tylko znaki dopuszczalne dla pól obiektów, oba zapisy są równoważne.
W starych skryptach i kursach można spotkać jeszcze bardziej skrócony zapis document.nazwaformularza
— ten sposób jest niestandardowy, przestarzały i nie będzie działał w każdej
przeglądarce.
Odnalezienie elementu
Wewnątrz obiektu formularza można odwoływać się do jego kontrolek po nazwach za pośrednictwem kolekcji elements
:
document.forms[0].elements['nazwaelementu']
lub (w przeciwieństwie do formularzy w obiekcie document
) odwoływać się bezpośrednio po nazwie:
document.forms[0].nazwaelementu
Ta składnia jest typowa dla wszystkich obiektów JavaScript — zapoznaj się ze szczegółami.
Żeby nie powtarzać w kółko document.forms
... można sobie przypisać obiekt formularza do zmiennej tymczasowej:
var f = document.forms[0]
Tablice/kolekcje elementów
Należy mieć na uwadze, że jeśli w obrębie elementu formularza (znacznik <form>
) występuje więcej niż jeden element (input, select, textarea itd.) o tej samej nazwie,
obiekt dostępny pod referencją document.forms[0].nazwaelementu
stanie się automatycznie kolekcją właściwych elementów pól formularza. Jeśli np. lista pól typu checkbox generowana jest dynamicznie, to często kod jego obsługi powinien obsłużyć również przypadek gdy liczebnośc pól wynosi jeden.
Oszukane tablice PHP
PHP używa niestandardowej konstrukcji „tablic” w formularzach polegającej na dodaniu []
do nazwy pól. To nie tworzy tablicy
JavaScript i nie ma szczególnego znaczenia dla przeglądarek. Do tych pól należy się odwoływać tak samo, jak do innych:
formularz['nazwapola[]']
Poprawna konstrukcja — to jest nazwa z klamrami, a nie tablica.
formularz.nazwapola[]
Błędna konstrukcja traktująca pojedyńcze pole jako tablicę.
Formularz danego pola
Każdy element formularza ma pole form
, które wskazuje formularz, do którego element należy. Jest to szczególnie przydatne przy obsłudze zdarzeń.
var textbox = document.forms[0].przykladowy_element;
textbox.form.inny_element
Ta konstrukcja wskazuje element formularza o nazwie inny_element, który jest w tym samym formularzu, co element przypisany zmiennej textbox.
Odczyt wartości
Prawie każda kontrolka formularza ma pole value
, które zawiera jej wartość:
document.forms.daneOsobowe.imie.value
Odczyta zawartość pola o nazwie imie z formularza o nazwie daneOsobowe.
Zdarzenia
Wysyłanie
Element <form>
tuż przed wysłaniem formularza generuje zdarzenie submit
.
Zmiany
onchange, onclick, onkey*
Aktywacja
onfocus/onblur,
value, checked, this.form.elements
podlinkować do składni tablic
Weryfikacja danych
regexpy, parseInt, focus(),
Dynamiczne elementy
Web Forms 2 posiada mechanizmy do tworzenia dynamicznych formularzy.
W prostych przypadkach najlepiej umieścić wszystkie elementy formularza w kodzie i ukrywać i pokazywać je w razie potrzeby.
Bardziej złożone formularze można zbudować po prostu za pomocą DOM.
Zawartość <select>
edytuje się przez DOM HTML.
dokończyć
Zmodyfikowano: 24.04.2007, 22:18