software center, download, programy, pliki, teledyski, mp3
Menu główne


line strona główna
line darmowy download
line baza artykułów i porad
line kontakt z nami
Programy
line Systemy
line Artykuły PDF

Security

line Skanery
line Sniffery
line Security

Windows

line Użytkowe
line Przeglądarki graficzne
line Kodeki
line Narzędzia plikowe
line Narzędzia dyskowe
line Narzędzia systemowe
line Sterowniki
line Szyfrowanie danych
line Zarządzanie hasłami
line Zarządzanie rejestrem
line Łaty i Patche
line Zarządzanie pamięcią
line Synchronizacja czasu
line Nagrywanie płyt
line Free Antivirus (Darmowe Antyvirusy)
line Sterowniki
line Obróbka dźwięku
line Edycja wideo

Internetowe

line Bezpieczeństwo
line Programy p2p
line Komunikatory
line Dodatki do przeglądarek
line Klienty poczty elektronicznej
line Narzędzia Antyspamowe
line Przeglądarki grup dyskusyjnych
line Przeglądarki Offline
line Serwery poczty elektronicznej
line Telefonia komórkowa
line Wyszukiwarki internetowe
line Zdalny dostęp
line Cybernianie
line Klienty FTP
line Narzędzia internetowe
line Prywatnośc
line Przeglądarki internetowe
line Serwery FTP
line Serwery WWW
line Wspomagacze ściągania
line Zarządzanie siecią lokalną

Tuning Systemu

line Diagnostyka i testowanie
line Inne
line Rozszerzenia pulpitu
line Tapety na pulpit
line Tuning Systemu
line Ikony
line Powłoki
line Tuning sprzętu
line Wygaszacze ekranu

Programowanie

line Kompilatory
line Biblioteki i komponenty
line Bazy danych
line Edytory programistyczne
line Środowiska programistyczne
line Debugery
line Tworzenie wersji instalacyjnych

Webmastering

line Użytkowe
line Kursy

Linux

line Użytkowe
line Internetowe
line Multimedialne

Programy biurowe

line Programy dla firm
line Pakiety biurowe
line Administracja
line Edytory tekstu
line Grafika prezentacyjna
line Kadry i płace
line Wspomaganie projektowania
line Zarządzanie projektami
line Bazy danych
line Finanse i księgowośc
line Handel
line Programy ewidencyjne
line Zarządzanie informacją osobistą (PIM)
Nasze serwisy

Programy download
Bramka SMS
Download
Gry
Gry Online
Linux
Muzyka
Newsy
Programowanie
Program TV
Śmieszne Filmy
Teledyski
Kobiety


Artykuły > Programowanie > Skrypty JavaScript ułatwiające przetwarzanie formularzy

Skrypty JavaScript ułatwiające przetwarzanie formularzy

Oprogramowanie formularza w języku JavaScript niesie za sobą kilka korzyści, które zwiększają komfort pracy użytkownika. Typowymi przykładami są wstępne sprawdzenie poprawności danych bez konieczności kontaktu z serwerem, ograniczenie powierzchni zajmowanej przez formularz dzięki zastosowaniu kontrolek, które automatycznie wysyłają formularz, wymuszenie poprawnych danych poprzez zablokowanie niedozwolonych klawiszy czy wyświetlanie znikających podpowiedzi w polach tekstowych (podpowiedzi znikają po umieszczeniu kursora wewnątrz kontrolki). W artykule omówimy najczęściej spotykane skrypty JavaScript, które ułatwiają wypełnianie formularzy.

Przenoszenie kursora do kontrolki formularza

Przyjrzyjmy się formularzowi przedstawionemu na rysunku 1. Po wyświetleniu takiej witryny w przeglądarce, kursor będzie znajdował się poza formularzem. Ż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 albo klawisz tabulacji, albo klikamy w 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 odniesieniu 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ć funkcję fokus(), która uaktywni wybraną kontrolkę. Kod takiej funkcji jest przedstawiony na listingu 1. Parametr AElementID jest identyfikatorem, czyli wartością atrybutu id, elementu, który ma zostać uaktywniony.

function fokus(AElementID)
{
var el = document.getElementById(AElementID);
el.focus();
}

Listing 1. Kod funkcji fokus().

Po drugie funkcja fokus() musi zostać wywołana w momencie wyświetlania strony. Zatem jako skrypt obsługi zdarzenia onload elementu BODY podajemy funkcję fokus() z identyfikatorem kontrolki, która ma zostać uaktywniona:

<BODY onload="fokus('poleemail');">
...
<INPUT name="email" id="poleemail">
...
</BODY>

Wreszcie ostatnim, trzecim, etapem jest nadanie atrybutu id wybranej kontrolce formularza. W powyższym przykładzie, kontrolka INPUT posiada oprócz atrybutu name o wartości email również atrybut id="poleemail". 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 email. Użytkownik może od razu rozpocząć wprowadzanie adresu, bez konieczności klikania w pole tekstowe czy kilkukrotnego 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że 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, jakie trzeba wykonać, są nadanie atrybutu id odpowiedniej kontrolce oraz modyfikacja obsługi zdarzenia onload (należy podać identyfikator elementu, jaki 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

Po wybraniu aktywnego elementu formularza przejdźmy do sprawdzenia poprawności danych wprowadzonych przez użytkownika. Walidajca formularza jest wykonywana podczas obsługi zdarzenia onsubmit elementu FORM:

<FORM action="..." onsubmit="return validateForm(this);">
...
</FORM>

Funkcja validateForm() zwraca wartość logiczną. W przypadku, gdy dane zawarte w formularzu spełniają nakładane ograniczenia, wynikiem 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 validateForm(). 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 uniwersalny (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.

function validateForm(AForm)
{
if (!(AForm.soft1.checked ||
AForm.soft2.checked ||
AForm.soft3.checked ||
AForm.soft4.checked ||
AForm.soft5.checked)) {
alert("Wypełnij przynajmniej jedno pole!");
return false;
} else {
return true;
}
}

Listing 2. Funkcja validateForm() wymagająca, by jedno z pól typu checkbox zostało zaznaczone.

Formularz sprawdzany funkcją z listingu 2 jest widoczny na rysunku 2. Posiada on kilka pól typu checkbox. Kolejne pola nazywają się soft1, soft2, ..., soft5:

<INPUT type="checkbox" name="soft1">
<INPUT type="checkbox" name="soft2">

Procedura walidująca zawarta w kodzie funkcji validateForm() wymaga, by przynajmniej jedno pole było zaznaczone (czyli wartość jednego z pól, np. AForm.soft1.checked musi być równa true).

Komunikat wyświetlany w przypadku błędnego wypełnienia jest widoczny na rysunku 2. Do wyświetlenia komunikatu służy funkcja alert() wywoływana wewnątrz funkcji validateForm().





Rys. 2. Formularz o kilku polach typu checkbox oraz komunikat diagnostyczny informujący o błędnym wypełnieniu. Komunikat jest wyświetlany funkcją alert() wywoływaną wewnątrz funkcji validateForm().

Ogólnie, struktura walidacji formularza w skrypcie JavaScript przebiega następująco:

  • Przygotowujemy funkcję walidateForm().
    • Funkcja ta jest dostosowana do konkretnego formularza.
    • Jej jedynym parametrem jest referencja od obiektu będącego walidowanym formularzem.
    • Zwracana wartość jest informacją logiczną, mówiącą o poprawności danych zawartych w formularzu.
    • W przypadku stwierdzenia błędów, wyświetlane są komunikaty diagnostyczne (funkcja alert()).
  • Element FORM posiada obsługę zdarzenia onsubmit. Wywołujemy funkcję validateForm() przekazując jej obiekt this: onsubmit="return validateForm(this);"

Inne przykłady funkcji validateForm() są przedstawione na listingach 3 oraz 4.

function validateForm(AForm)
{
if (!AForm.imie.value) {
alert("Wypełnij pole imię!");
return false;
} else {
return true;
}
}

Listing 3. Funkcja validateForm() wymagająca, by pole o nazwie imie zostało wypełnione.



function validateForm(AForm)
{
if ((!AForm.imie.value) || (AForm.imie.value.length < 3)) {
alert("Wypełnij pole imię, podaj co najmniej trzy znaki!");
return false;
} else {
return true;
}
}

Listing 4. Funkcja validateForm() wymagająca, by pole o nazwie imie zostało wypełnione oraz by wprowadzony napis miał co najmniej trzy znaki.

Wykorzystanie wyrażeń regularnych do walidacji pól

Walidacja wartości wprowadzonych w polach tekstowych zawarta w listingach 3 oraz 4 uwzględnia jedynie najprostsze możliwe testy, tj. stwierdzenie czy pole zostało w ogóle wypełnione oraz czy liczba wprowadzonych znaków jest odpowiednia. W przypadku bardziej złożonych testów należy zastosować wyrażenia regularne.

Niech przykładowy formularz zawiera pole INPUT o nazwie litery:

<INPUT name="litery">

W takim przypadku, wewnątrz funkcji validateForm() wywołanej z parametrem this w obsłudze zdarzenia onsubmit elementu FORM), dostępny będzie napis AForm.litery.value. Napis ten kopiujemy do zmiennej str instrukcją:

str = AForm.litery.value;

Następnie, w zmiennej litPatt przygotowujemy wzorzec ograniczający poprawność danych:

litPatt = /^[A-Z]{3,5}$/;

Podane wyrażenie regularne pasuje do napisów, które zawierają od 3 do 5 dużych liter alfabetu łacińskiego (tj. bez polskich „ogonków”).

Następnie wzorzec litPatt dopasowujemy do napisu zawartego w zmiennej str, wywołując metodę match():

wynik = str.match(litPatt);

Wynik zwrócony przez funkcję match() zawiera informację o tym, czy dane wprowadzone w formularzu są zgodne z podanym wyrażeniem.

Pełny kod funkcji walidującej pole litery jest przedstawiony na listingu 5.

function validateForm(AForm)
{
str = AForm.litery.value;
litPatt = /^[A-Z]{3,5}$/;
wynik = str.match(litPatt);

if (wynik == null) {
alert("Napis może zawierać od 3 do 5 dużych liter!");
return false;
} else {
return true;
}
}

Listing 5. Walidacja przy użyciu wyrażeń regularnych.

Oczywiście operacja kopiowania napisu z pola litery do zmiennej str nie jest konieczna. Powyższy kod, wykonany z pominięciem zmiennej str, wyglądałby następująco:

litPatt = /^[A-Z]{3,5}$/;
wynik = AForm.litery.value.match(litPatt);

Testowanie poprawności kilku pól

Jeśli formularz zawiera wiele pól, wówczas nie możemy ograniczyć się do sprawdzenia jednego z nich. Należy sprawdzić poprawność wszystkich pól formularza, lub przynajmniej pól wymaganych. W takim przypadku funkcja validateForm() będzie kolejno testowała pola formularza aż do napotkania pierwszego błędu. Jeśli wszystkie pola uznane zostaną za poprawne, to zwracana jest wartość true. W przeciwnym razie, po pierwszym napotkanym niepoprawnym polu, wyświetlamy komunikat diagnostyczny, po czym zwracamy wartość false.

Przykład takiej procedury jest przedstawiony na listingu 6. Jest to procedura sprawdzająca poprawność formularza „Dane osobowe”.

function validateForm(AForm)
{
//1. Imię
reg = /^[a-zA-ZąćęłńóśżźĄĆĘŁŃÓŚŻŹ]{2,20}$/;
wyn = AForm.fimie.value.match(reg);
if (wyn == null) {
alert("Proszę podać poprawne imie. " +
"Imie musi zawierać od 2 do 20 liter. " +
"Żadne znaki poza literami nie są dozwolone.");
return false;
}

//3. Płeć
if (!(AForm.fplec[0].checked || AForm.fplec[1].checked )) {
alert("Proszę zaznaczyć pole 'Płeć'.");
return false;
};

//3. Email
reg = /^[a-zA-Z0-9ąćęłńóśżźĄĆĘŁŃÓŚŻŹ]{1,30}@[a-zA-Z0-9ąćęłńóśżźĄĆĘŁŃÓŚŻŹ]+(\.[a-zA-Z0-9ąćęłńóśżźĄĆĘŁŃÓŚŻŹ]+)+$/;
wyn = AForm.femail.value.match(reg);
if (wyn == null) {
alert("Proszę podać poprawny adres email. " +
"Poprawny adres musi zawierać małpę " +
"oraz co najmniej dwa człony nazwy serwera, " +
"np. a@b.c lub ala@ma.kota.czarnego.com.");
return false;
}

//4. Województwo
if (!(AForm.fwojewodztwo.selectedIndex > 0 &&
AForm.fwojewodztwo.selectedIndex <= 16)) {
alert("Proszę wybrać województwo.");
return false;
};

return true;
}

Listing 6. Sprawdzenie poprawności kilku pól formularza.

Pierwszym sprawdzanym polem jest pole o nazwie fimie. Wprowadzona wartość ma być zgodna z wyrażeniem:

reg = /^[a-zA-ZąćęłńóśżźĄĆĘŁŃÓŚŻŹ]{2,20}$/;

czyli ma się składać wyłącznie z liter. Podany napis ma mieć długość od 2 do 20 znaków.

Drugi test dotyczy pól określających płeć. Zaznaczone wartości są dostępne w tablicy fplec pod indeksami fplec[0] oraz fplec[1]. Badamy czy przynajmniej jedno z pól zostało zaznaczone.

Trzecie sprawdzane pole zawiera adres email. Tym razem wyrażenie regularne jest nieco bardziej skomplikowane. Struktura wyrażenia jest następująca:

reg = /^X@Y$/;

Napis składa się z części oznaczonej jako X (przed znakiem małpy), znaku małpy @ oraz części oznaczonej jako Y (po znaku małpy).

Skrót X użyty w powyższym opisie oznacza napis o długości od 1 do 30 liter składający się z cyfr lub liter (tym razem dopuszczamy „ogonki”):

[a-zA-Z0-9ąćęłńóśżźĄĆĘŁŃÓŚŻŹ]{1,30}

Natomiast symbol Y oznacza napis zgodny z wyrażeniem:

[a-zA-Z0-9ąćęłńóśżźĄĆĘŁŃÓŚŻŹ]+(\.[a-zA-Z0-9ąćęłńóśżźĄĆĘŁŃÓŚŻŹ]+)+

Po uproszczeniu zbioru występującego w dwóch miejscach powyższego wyrażenia do postaci [A] otrzymamy wyrażenie:

[A]+(\.[A]+)+

Ponieważ znak + oznacza w wyrażeniach regularnych dowolną liczbę powtórzeń (począwszy od jednego) wyrażenia poprzedzającego, zaś nawiasy okrągłe grupują człony wyrażenia, zatem podany wzorzec jest zgodny z napisami:

A.AAAA
AA.A.AAA
AA.AA.A.AAAA
itd.

Reasumując powyższe warunki, wprowadzony adres email musi zawierać:

  • znak małpy @;
  • przed znakiem małpy od 1 do 30 znaków (liter lub cyfr);
  • po znaku małpy: co najmniej dwa człony oddzielone kropką; każdy człon składa się co najmniej z jednego znaku;

Przykładami adresów, które pasują do podanego wzorca są:

ala@ma.kota
a@b.c.d.e
john@books.com

zaś niepasującymi:

ala.ma.kota  (brak małpy)
ala@ma (za mało członów domeny)
ala@ma..kota (brak przynajmniej jednej litery pomiędzy kropkami)
(ala)@[m].k (niedozwolone znaki)

Ostatni z testów dotyczy pola fwojewodztwo i polega na sprawdzeniu indeksu wybranego elementu listy rozwijanej.

Czyszczenie zawartości formularza

Formularz zawierający dane osobowe posiada przycisk do usunięcia zawartości. Nie służy do tego bynajmniej standardowy przycisk o kodzie:

<INPUT type="reset" value="Reset">

Działanie powyższego przycisku typu reset powoduje powrót do wartości, jakimi formularz został zainicjalizowany. Jeśli w kodzie formularza znajduje się kontrolka:

<INPUT name="imie" value="Janek">

zaś użytkownik wprowadził w polu wartość Janusz, wówczas naciśnięcie standardowego przycisku do resetowania zawartości formularza (czyli podanego przycisku INPUT typu reset) spowoduje ponowne ustalenie wartości pola imie na Janek.

Pole nie zostaje wyczyszczone. Jego wartość jest równa — po naciśnięciu przycisku Reset — wartości ustalonej atrybutem value.

Jeśli chcemy usunąć wprowadzone wartości (czyli wprowadzić napisy puste do wierszy wprowadzania danych, odznaczyć wszystkie pola wyboru itd.), to musimy do tego celu przygotować specjalny skrypt. Kod funkcji clearForm() został przedstawiony na listingu 7. Funkcja ta jest uniwersalna i może zostać użyta w odniesieniu do dowolnego formularza. Jej jedynym parametrem jest referencja do obiektu FORM.

function clearForm(AForm)
{
for (i = 0; i < AForm.elements.length; i++) {
if (AForm.elements.type == "radio") {
AForm.elements.checked = false;
} else if (AForm.elements.type == "checkbox") {
AForm.elements.checked = false;
} else if (AForm.elements.type == "text") {
AForm.elements.value = '';
} else if (AForm.elements.type == "textarea") {
AForm.elements.value = '';
} else if (AForm.elements.type == "select-one") {
AForm.elements.selectedIndex = 0;
} else if (AForm.elements.type == "select-multiple") {
AForm.elements.selectedIndex = -1;
}
}
return true;
}

Listing 7. Funkcja czyszcząca zawartość formularza.

Funkcję clearForm() wywołujemy po naciśnięciu przycisku ogólnego przeznaczenia (element INPUT typu button; posiada on zdarzenie onclick bez żadnej predefiniowanej procedury obsługi).

<INPUT type="button" value="Wyczyść" onclick="return clearForm(this.form);">

Wywołując funkcję clearForm() przekazujemy jako parametr obiekt this.form będący referencją do formularza zawierającego przycisk (zmienna this oznacza przycisk; każda kontrolka formularza zawiera pole form wskazujące formularz, zawierający daną kontrolkę).

Przykładowy formularz czyszczony opisaną metodą jest przedstawiony na rysunku 3.

Rys. 3. Formularz posiadający przyciski Wyczyść oraz Resetuj.

Modyfikowanie tekstu wprowadzanego w polu INPUT

Nieco innym podejściem do problemu walidacji formularza jest modyfikacja wartości wprowadzanych przez użytkownika. Możemy usunąć niepożądane znaki, czy zmienić wielkość liter.

Do zmiany wielkości liter tekstu wprowadzanego przez użytkownika w trakcie pisania stosujemy metodę onkeyup. W obsłudze zdarzenia wywołujemy metodę toLowerCase(), przypisując otrzymaną wartość do pola value:

<INPUT name="proba"
onkeyup="javascript:this.value=this.value.toLowerCase();">

Stosując funkcję upperCaseField() o kodzie:

function upperCaseField(AField)
{
AField.value = AField.value.toUpperCase();
}

kod HTML pola INPUT przyjmie postać:

<INPUT name="proba" onkeyup="upperCaseField(this);">

Maskowanie klawiszy

Jeszcze inne podejście do zapewnienia poprawności danych pochodzących z formularza polega na wymuszeniu konkretnych napisów przez zablokowanie części klawiszy.

Jeśli wprowadzane pole ma zawierać kwotę dotacji (wprowadzaną przez użytkownika), to zakres dostępnych znaków możemy ograniczyć do cyfr oraz ewentualnie znaków kropki, przecinka czy spacji. Podobnie, nazwa konta użytkownika zazwyczaj może zawierać litery, cyfry oraz kilka dodatkowych znaków.

Do zablokowania klawiszy wewnątrz pola tekstowego stosujemy zdarzenie onkeypress. Zdarzenie to jest wywoływane ilekroć użytkownik naciśnie dowolny z klawiszy klawiatury, gdy kursor znajduje się wewnątrz danego pola tekstowego. Do obsługi zdarzenia wykorzystujemy funkcję maskujKlawisze() przedstawioną na listingu 8. Funkcja ta posiada dwa parametry: zdarzenie event oraz napis zawierający dozwolone litery.

function maskujKlawisze(AEvent, AMaska)
{
if (window.Event) {
kodKlawisza = AEvent.which;
} else {
kodKlawisza = AEvent.keyCode;
}

if (kodKlawisza == 13) {
return true; // Enter
};

if (kodKlawisza == 0) {
return true; // klawisze steruj±ce
};

klawisz = String.fromCharCode(kodKlawisza);

if (AMaska.indexOf(klawisz) == -1) {
return false;
} else {
return true;
}
}

Listing 8. Funkcja maskująca klawisze.

Jeśli dostępnymi literami mają być cyfry 0, 9, 1 oraz 2, wówczas funkcję maskujKlawisze() wywołujemy następująco:

<INPUT name="liczba"
onkeypress="return maskujKlawisze(event, '0912');">

Natomiast w przypadku, gdy dozwolone są znaki ze zbioru [abcXYZ], wywołanie ma postać:

<INPUT name="wyraz"
onkeypress="return maskujKlawisze(event, 'abcXYZ');">

Pola tekstowe z podpowiedziami

Nieco innym rodzajem ułatwień, udostępnianych przez JavaScript, są pola tekstowe zawierające podpowiedzi. Pole takie, przedstawione na rysunku 4, zawiera tekst Szukaj w Internecie. Po umieszczeniu kursora wewnątrz pola, tekst znika.

Rys. 4. Pole tekstowe z podpowiedzią „Szukaj w Internecie”. Podpowiedź znika po umieszczeniu kursora w polu.

Skrypt taki wykorzystuje zdarzenie onfocus, które jest generowane ilekroć kontrolka staje się aktywna (czyli otrzymuje kursor). Treść podpowiedzi jest ustalana jako wartość atrybutu value, zaś obsługę zdarzenia onfocus realizuje funkcja czyszSzukaj():

<INPUT name="fszukaj"
value="Szukaj w internecie"
onfocus="return czyscSzukaj(this);">

Wewnątrz funkcji czyscSzukaj() sprawdzamy czy pole zawiera tekst podpowiedzi i jeśli tak, do pola wprowadzamy napis pusty:

function czyscSzukaj(AInput)
{
if (AInput.value == 'Szukaj w internecie') {
AInput.value = '';
}
return true;
}

Automatyczne wysyłanie formularza

Ostatni z przykładów demonstruje, w jaki sposób automatycznie wysłać formularz, gdy została wybrana jedna z jego opcji. Wysłanie jest automatyczne w tym sensie, że nie wymaga naciśnięcia przycisku Wyślij. Formularz taki nie musi w ogóle zawierać przycisku Wyślij, dzięki czemu zajmuje nieco mniej miejsca w układzie witryny. W przeglądarce wyświetlana jest lista rozwijana. Wybranie dowolnej opcji powoduje wysłanie formularza.

W odniesieniu do list rozwijanych, należy wykorzystać zdarzenie onchange. Kodem obsługi zdarzenia jest wywołanie metody submit() formularza zawierającego listę wyboru (tj. obiektu dostępnego jako this.form):

<SELECT name="dzien" onchange="this.form.submit();">
...
</SELECT>

Sztuczkę taka możemy również zastosować w odniesieniu do innych kontrolek. Na przykład wykluczające pole wyboru posiada zdarzenie onclick, którego obsługa może powodować automatyczne wysłanie formularza po zaznaczeniu jednej z opcji:

<INPUT type="radio" name="fodp" onclick="this.form.submit();">
lp.PrzykładPobierz
1. Wybór aktywnej kontrolki 1-aktywne-miejsce.zip
2. Walidacja wprowadzonych danych 2-sposoby-wywolania-walidacji.zip
3. Walidacja przy użyciu wyrażeń regularnych 3-walidacja-regexp.zip
4. Walidacja wielu kontrolek. Formularz „Dane osobowe” 4-walidacja-dane-osobowe.zip
5. Czyszczenie zawartości formularza 5-czyszczenie-formularza.zip
6. Modyfikacja tekstu w trakcie pisania 6-modyfikacja-w-czasie-pisania.zip
7. Maskowanie klawiszy 7-maska-klawiszy.zip
8. Pole tekstowe z podpowiedzią 8-pole-input-z-podpowiedzia.zip
9. Automatyczne wysyłanie formularza 9-automatyczne-wysylanie.zip
10 Dokumentajca języka JavaScript dokumentacja-JavaScript.zip
komentarz[5] |

programy download hacking program tv bramka sms teledyski kody do gier
trailery filmiki gry online antywirusy artykuły tutoriale systemy
© 2006-2009 haksior.com. Wszelkie prawa zastrzeżone.
Design by jPortal.info
0.039 |