[ Pobierz całość w formacie PDF ]
.Przyciskowi nie nadajemy nazwy,nie będzie ona tutaj do niczego potrzebna.Okrelamy jednak procedurę, która mazostać wykonana po kliknięciu na nim.Podajemy zatem nazwę zdarzenia onClick iprzypisujemy mu procedurę przetwarzaj_dane().Do tej procedury (funkcji) jako parametr przekazujemy this.form, czyli obiektreprezentujšcy bieżšcy formularz o nazwie formularz1.Odwołujemy się do niego wfunkcji przetwarzaj_dane() za pomocš nazwy zmiennej formularz.Ponieważ poludo wprowadzania tekstu nadalimy nazwę imie, możemy się teraz do niegoodwoływać, piszšc formularz.imie.Dokładnie chodzi nam o sprawdzenie wartoci tego pola, piszemy zatemformularz.imie.value.Dalej następuje klasyczna konstrukcja if.else, którejnie trzeba chyba tłumaczyć.Gdybymy chcieli, aby pole tekstowe nie było napoczštku puste, ale zawierało jakš wartoć domylnš, powinnimy dodać dodefinicji tego pola parametr value np.Konkretny formularz jest tak naprawdę elementem zbioru wszystkich formularzy wdokumencie.A więc żeby się do niego dostać, można również napisać:document.forms.formularz1 lub też skorzystać z będšcej częciš dokumentutablicy zawierajšcej wszystkie formularze.Odwołujemy się do niej, piszšcdocument.forms[indeks], gdzie indeks jest liczbš okrelajšcš kolejny formularz.Liczbę wszystkich formularzy w dokumencie możemy okrelić, korzystajšc zargumentu length obiektu forms.Ćwiczenie 5.9.Napisz skrypt sprawdzajšcy iloć formularzy w dokumencie i wywietlajšcy tęwartoć w polu tekstowym.Iloć formularzy w dokumencie:Jak widać, aby dostać się do formularza, nie trzeba przekazywać go jakoparametru funkcji przetwarzaj_dane(), jak w poprzednim ćwiczeniu.Możnaskorzystać z opisanych wyżej konstrukcji języka.Trzeba jedynie pamiętać, żeelementy tablicy forms numerowane sš od zera, a nie od jedynki.Zatemformularz1 to forms[0], formularz2 to forms[1], itd.Obiekt formularza udostępnia właciwoci zebrane w tabeli 5.1 oraz jednš metodę submit.Tabela 5.1.Właciwoci udostępniane przez obiekt formNazwa metodyZnaczenieactionwartoć parametru ACTION w definicji formularzaElementstablica elementów, z których składa się dany formularzEncodingtyp kodowania, czyli wartoć parametru ENCTYPE etykietyLengthliczba elementów zawartych w formularzuMethodwartoć parametru METHOD etykietyTargetwartoć parametru TARGET etykietyDzięki tym właciwociom możemy dynamicznie zmieniać sposób zachowaniaformularza zawarty w jego definicji.Oprócz właciwoci mamy dostępnš jednšmetodę, mianowicie submit, która powoduje wysłanie danych z formularza doserwera.Możemy wykorzystać jš np.do sprawdzenia, czy użytkownik podałwszystkie wymagane przez nas dane.Ćwiczenie 5.10.Utwórz formularz jak na rysunku 5.4.Po nacinięciu przycisku Wylij, skrypt masprawdzić, czy użytkownik podał wszystkie wymagane dane.Rysunek 5.4.Wyglšd formularzaz ćwiczenia 5.10Proszę podać swoje dane:(Pola oznaczone * muszš zostać wypełnione)Dane personalne:imię:*nazwisko:*Adres:ulica:nr domu:TRkod:miasto:kraj:*tel.:*Powyższy skrypt generuje formularz przedstawiony na rysunku 5.4.Jest onformatowany za pomocš tabel HTML.Każde pole tekstowe formularza ma swojšnazwę, podawanš parametrem name, tak że możemy je bez problemu zidentyfikować.Na samym dole nie umieszczamy przycisku typu submit, jak w klasycznymformularzu, tylko zwyczajny przycisk typu button.Dodajemy natomiast do niegoprocedurę obsługi zdarzenia onClick o nazwie przetwarzaj_dane().Procedura tasprawdza po kolei wartoci interesujšcych nas pól i jeżeli dane pole niezostało wypełnione, dodaje do zmiennej napis nazwę tego pola oraz nadajezmiennej brak_danych wartoć true (prawda).Na samym końcu sprawdzamy wartoćtej zmiennej.Jeżeli jest ona równa true, czyli brakuje jakich danych, zapomocš metody alert() informujemy o tym użytkownika.Konkretnie wywietlamynazwy niewypełnionych pól oraz kończymy wykonywanie procedury.Jeżeli wartoćzmiennej brak_danych nie została zmodyfikowana, wywołujemy metodę submit().Powoduje ona przesłanie danych do serwera.Przypisanie formularz =document.forms[0] ma na celu jedynie uproszczenie zapisu.Skrypt ten można zmodyfikować również w taki sposób, aby w przypadku niewypełnienia pól, które nie sš wymagane, była im przypisywana wartoć np.brakdanych.Może być to przydatne w póniejszej analizie danych.Nie jest toskomplikowane.Wystarczy sprawdzać wartoci poszczególnych pól i w przypadkugdy zawierajš pusty łańcuch znaków, przypisać im wartoć brak danych, czyliif (formularz.nazwa_pola.value == ) formularz.nazwa_pola.value = ;Zamiast korzystać z metody submit(), możemy również, w celu uzyskania tegosamego efektu, wykorzystać zdarzenie onSubmit.Ćwiczenie 5.11.Utwórz formularz jak na rysunku 5.4.Po nacinięciu przycisku Wylij skrypt masprawdzić, czy użytkownik podał wszystkie wymagane dane.Jeli polanieoznaczone gwiazdkami nie zostanš wypełnione, nadaj im wartoć brak danych.Wykorzystaj zdarzenie onSubmit.Prosze podać swoje dane:(Pola oznaczone * muszš zostać wypełnione)Dane personalne:imię:*nazwisko:*Adres:ulica:nr domu:kod:miasto:kraj:*tel.:*Mimo, iż kod wyglšda podobnie jak w ćwiczeniu 5.10, wykorzystywana jest tujednak inna technika.Obecnie przycisk wysyłajšcy jest już typu submit.Jegonacinięcie powoduje wywołanie zdarzenia onSubmit, któremu przypisana jestodpowiednia procedura obsługi.W przypadku wypełnienia wszystkich żšdanych pólzwraca ona wartoć truei następuje wysłanie zawartoci formularza.W przeciwnym przypadku, onSubmit =false, wysłanie nie nastšpi.Użytkownik zostanie jednak poinformowany, którepola nie zostały przez niego wypełnione
[ Pobierz całość w formacie PDF ]