[ Pobierz całość w formacie PDF ]
łączniki w danej grupie mają taką samą nazwę, a więc wskazanie jednego z nich
na jej podstawie staje się niemożliwe.
Aby ułatwić rozwiązanie tego problemu, JavaScript umieszcza wszystkie
przełączniki o tej samej nazwie na jednej liście. Każdemu z nich przypisywany
jest numer pierwszy przełącznik ma numer 0, drugi 1, trzeci 2 itd. (więk-
szość języków programowania rozpoczyna liczenie od 0 musicie się do tego
po prostu przyzwyczaić).
Odwołanie do przełącznika tworzymy przy użyciu zapisu nazwa_przełącz-
nika[numer_elementu]. Przykładowo, jeśli na stronie umieścicie cztery przełączniki
o nazwie age, pierwszy z nich będzie określany jako age[0], drugi jako age[1],
trzeci jako age[2], a czwarty jako age[3].
Zaznaczenie danego przełącznika można sprawdzić za pomocą jego atrybutu
checked, podobnie jak w przypadku pól wyboru. Załóżmy, że mamy cztery
przełączniki o nazwie age umieszczone w formularzu radio_button_form (patrz
listing 7.6). Aby sprawdzić, czy użytkownik zaznaczył pierwszy z nich, należy
zastosować następującą instrukcję:
if (window.document.radio_button_form.age[0].checked == true)
{
alert("Pierwszy przełącznik został zaznaczony!");
}
Metoda ta jest podobna do stosowanej wobec pól wyboru. Jedyna różnica
polega na konieczności stosowania numeracji pierwszy przełącznik w grupie
age określany jest jako age[0], podczas gdy w przypadku pól zaznaczenia wy-
starczyłoby podać odpowiednią nazwę.
Jeśli wie się już, w jaki sposób sprawdzić zaznaczenie przełączników, w łatwy
sposób można opracować skrypt pozwalający na ich zaznaczanie. Zaznaczenie
pola wyboru umożliwia poniższa instrukcja:
window.document.form_name.checkbox_name.checked = true;
W przypadku przełączników należy dodatkowo wskazać numer tego spośród
nich, który ma zostać zaznaczony. Innymi słowy, aby zaznaczyć pierwszy prze-
łącznik w grupie age, piszemy:
Przesyłanie i odbieranie informacji za pomocą formularzy 159
window.document.form_name.age[0].checked = true;
Rozwijane menu i listy
JavaScript daje możliwość odczytywania zawartości rozwijanych menu i list, jak
również umieszczania w nich wybranych wartości na podobnej zasadzie, jak
w przypadku przełączników. Istnieją jednak dwie podstawowe różnice. Po pierw-
sze funkcję stosowanego podczas obsługiwania przełączników atrybutu checked
spełnia tutaj atrybut selected. Po drugie lista zawierająca opcje wchodzące w skład
rozwijanego menu lub listy różni się od stosowanej w przypadku grupy prze-
łączników. Z poprzedniego podrozdziału pamiętacie zapewne, że przeglądarka
tworzy listę przełączników i nadaje jej nazwę zdefiniowaną w ich atrybucie name.
W przedstawionym w listingu 7.2 przykładzie przypisałem temu atrybutowi war-
tość age, w związku z czym lista przełączników również nazwana została w ten
sposób. Pierwszy element na liście nosił nazwę age[0].
Rozwijane menu i listy posiadają natomiast atrybut options listę wszyst-
kich dostępnych opcji wraz z informacją, które spośród nich zostały zaznaczone.
W przedstawionym poniżej (listing 7.12) kodzie pierwszym elementem (numer 0)
zdefiniowanego menu jest opcja o nazwie male, a drugim opcja o nazwie female
(numer 1).
Listing 7.12. Proste rozwijane menu
Mężczyzna
Kobieta
Poniższa instrukcja wyświetla komunikat, kiedy użytkownik zaznaczy pierwszą
opcję na liście (element o nazwie male):
if (window.document.my_form.the_gender.options[0].selected == true)
{
alert("To chłopiec!)";
}
Możliwe jest również automatyczne zaznaczenie jednej z opcji:
window.document.my_form.the_gender.options[1].selected = true;
Wykonanie powyższego wiersza kodu spowoduje zaznaczenie opcji Kobieta
w rozwijanym menu.
160 Rozdział 7
Jeśli lista opcji w menu jest bardzo długa, a Wy chcecie jedynie zorientować
się, które spośród nich zostały wybrane przez użytkownika, możecie wykorzy-
stać atrybut value, przechowujący wartość każdego z zaznaczonych elementów.
[ Pobierz całość w formacie PDF ]