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

Specyfikacja DOM2 XML

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.

Zdarzenia | Elementy dynamiczne
Zmodyfikowano: 03.09.2011, 08:55
submit