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']
  lub
  document.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 JavaScriptzapoznaj 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 Bug w IE

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