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

Trzeba skorzystać ze zwykłych metod DOM (getElementById(), nextSibling(), itd.)

Metoda getElementsByTagName() z argumentem 'form' zwraca kolekcję zawierającą wszystkie formularze na stronie.

  document.getElementsByTagName('form')[0]
  Obiekt reprezentujący pierwszy element <form> na stronie

Jeśli formularz ma atrybut id, to można go wybrać po identyfikatorze za pomocą metody getElementById():

  <form id="nazwaformularza"><div/></form>
  <?javascript
  document.getElementById('nazwaformularza')
  ?>

Odnalezienie elementu

Wewnątrz obiektu formularza można odwoływać się do jego kontrolek po nazwach za pośrednictwem metod DOM:

  document.getElementsByTagName('form')[0].getElementById('nazwaelementu')

Ta składnia jest typowa dla wszystkich obiektów JavaScript — zapoznaj się ze szczegółami.

Żeby nie powtarzać w kółko document.getElementsByTagName('form')... można sobie przypisać obiekt formularza do zmiennej tymczasowej:

var f = document.getElementsByTagName('form')[0]

Formularz danego pola

Każdy element ma pole parentNode, jak wiesz z DOM, które wskazuje element, do którego element należy. Jest to szczególnie przydatne przy obsłudze zdarzeń.

  var textbox = document.getElementsByTagName('form')[0].getElementById('przykladowy_element');
  textbox.parentNode.getElementById('inny_element')
  Ta konstrukcja wskazuje element formularza o identyfikatorze 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.getElementById('daneOsobowe').getElementById('imie').value
 Odczyta zawartość pola o identyfikatorze imie z formularza o identyfikatorze daneOsobowe.

Zdarzenia

Wysyłanie

Element <form> tuż przed wysłaniem formularza generuje zdarzenie submit.

Zmiany

onkey*

Aktywacja

onfocus/onblur,

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.


Zmodyfikowano: 03.09.2011, 01:55
submit