Skrypty JavaScript ułatwiające przetwarzanie formularzy

Dokument: pdf (437.1 KB)
  • 4 stron
Opublikowany 2016-12-31 05:52:51

CMYK Przenoszenie kursora do kontrolki formularza Przyjrzyjmy siê formularzowi przedstawionemu na rys. 1. Po wyœwietle- niu takiej witryny w przegl¹darce kursor bêdzie znajdowa³ siê poza for- mularzem. ¯adna z kontrolek nie bêdzie aktywna. Jeœli teraz z klawiatury wprowadzimy tekst, wówczas nie trafi on do ¿adnego z pól formularza. Wprowadzanie danych musimy poprzedziæ wyborem kontrolki. Stosujemy klawisz tabulacji, albo klikamy wybran¹ kontrolkê myszk¹. Rys. 1. Kursor umieszczamy w trzecim polu formularza W niektórych przypadkach warto formularz przygotowaæ w taki sposób, by jedna z jego kontrolek by³a aktywna od razu po wyœwietleniu witryny w przegl¹darce. Takie zachowanie bêdzie wygodne na przyk³ad w odniesie- niu do formularzy umo¿liwiaj¹cych logowanie lub wyszukiwanie informacji. Umieszczenie kursora w jednym z pól formularza wymaga trzech elementów w kodzie witryny. Po pierwsze musimy przygotowaæ funk- cjê fokus(), która uaktywni wybran¹ kontrolkê. Kod takiej funkcji jest przedstawiony na listingu 1 . Parametr AElementID jest identyfi- katorem, czyli wartoœci¹ atrybutu id, elementu, który ma zostaæ uak- tywniony. Po drugie funkcja fokus() musi zostaæ wywo³ana w momen- cie wyœwietlania strony. Zatem jako skrypt obs³ugi zdarzenia onload elementu BODY podajemy funkcjê fokus() z identyfikatorem kontrol- ki, która ma zostaæ uaktywniona:......JAVASCRIPT INTERNET.lipiec.2005100 NA CD NEWSY Z OK£ADKI FIRMA MAGAZYN PROGRAMY WARSZTAT Oprogramowanie formularza w jêzyku JavaScript daje kilka korzyœci, które zwiêkszaj¹ komfort pracy u¿ytkownika. Typowymi przyk³adami s¹: wstêpne sprawdzenie poprawnoœci danych bez kontaktu z serwerem, ograniczenie powierzchni zajmowanej przez formularz dziêki zastosowaniu kontrolek, które automatycznie wysy³aj¹ formularz, czy wymuszenie poprawnych danych poprzez zablokowanie niedozwolonych klawiszy. W artykule opiszemy najczêœciej spotykane skrypty JavaScript, które u³atwiaj¹ wype³nianie formularzy. W³odzimierz Gajda Skrypty JavaScript ułatwiające przetwarzanie formularzy l budowa formularzy HTML l znajomość JavaScript l znajomość wyrażeń regularnych WYMAGANA WIEDZA Wszystkie listingi, tabela oraz dokumentacja JavaScript (w plikach PDF) opisane w tym artykule są na płycie CD dołączonej do numeru, w katalogu Warsztat_formularze. l w jaki sposób pisać skrypty JavaScript, które służą do obsługi formularzy (np. umieszczają kursor wewnątrz wybranego pola, sprawdzają poprawność danych, stosują wyrażenia regularne itp.) CZEGO SIÊ DOWIESZ Z TEGO ARTYKU£U? CMYK Wreszcie ostatnim, trzecim etapem jest nadanie atrybutu id wybra- nej kontrolce formularza. W powy¿szym przyk³adzie kontrolka INPUT ma oprócz atrybutu name o wartoœci email równie¿ atrybut id=”pole- email”. Wartoœæ poleemail jest przekazywana do funkcji fokus(). Po wyœwietleniu tak przygotowanej strony kursor zostanie przez przegl¹darkê automatycznie umieszczony w polu tekstowym, które s³u¿y do wprowadzania adresu e-mail. U¿ytkownik mo¿e od razu roz- pocz¹æ wprowadzanie adresu, bez koniecznoœci klikania pola teksto- wego czy kilkakrotnego naciskania klawisza tabulacji. Powy¿szy kod JavaScript mo¿emy napisaæ na kilka sposobów. Na przyk³ad stosuj¹c obiekt document i tablice forms oraz elements: document.forms[0].elements[2].focus(); Jednak pierwsze z podanych rozwi¹zañ jest chyba najbardziej wygodne w u¿yciu. Kod funkcji fokus jest uniwersalny i nie ulega zmianie bez wzglêdu na modyfikacje kodu witryny, w szczególnoœci formularza oraz jego kontrolek. Jedynymi zmianami, które trzeba wykonaæ, s¹: nadanie atrybutu id odpowiedniej kontrolce oraz modyfikacja obs³ugi zdarzenia on- load (nale¿y podaæ identyfikator elementu, który ma zostaæ uaktywniony). Spakowane archiwum 1-aktywne-miejsce.zip zawiera kilka przyk³adowych rozwi¹zañ opisanego problemu wraz ze wskazaniem ich potencjalnych wad i zalet. Walidacja formularza Walidacja formularza jest wykonywana podczas obs³ugi zdarzenia on- submit elementu FORM:

...
Funkcja validateForm() zwraca wartoœæ logiczn¹. W przypadku gdy dane zawarte w formularzu spe³niaj¹ nak³adane ograniczenia, wy- nikiem funkcji powinna byæ wartoœæ true, w przeciwnym razie false. Parametr this przekazywany do funkcji jest referencj¹ do obiektu FORM, wewn¹trz którego wystêpuje wywo³anie funkcji validate- Form(). Kod funkcji, przedstawiony na listingu 2 , jest oczywiœcie przystosowany do walidacji konkretnego formularza. O ile funkcja do wyboru aktywnej kontrolki mo¿e byæ przygotowana w sposób uniwer- salny (tj. taki, by nadawa³a siê do wielu ró¿nych formularzy), to skrypt sprawdzaj¹cy poprawnoœæ jest dostosowany do konkretnego przypadku i trudno tutaj mówiæ o uniwersalnoœci takiego czy innego rozwi¹zania. Formularz sprawdzany funkcj¹ z listingu 2 jest widoczny na rys. 2. Ma on kilka pól typu checkbox. Kolejne pola nazywaj¹ siê soft1, soft2, ..., soft5:
Tagi:

Komentarze do: Skrypty JavaScript ułatwiające przetwarzanie formularzy • 0