JavaScript - obsługa formularzy w JavaScript, checkbox, radio, select

Kod:

Ewentualne Objaśnienia:

Tutaj mamy przykład bardzo prymitywnego quizu, a w istocie pokazałem jak JS współpracuje z polami typu checkbox - tutaj nie korzystamy już z wartości value tylko checked - czyli jak się łatwo domyślić czy dane pole jest zaznaczone czy też nie.

Przykład jest bardzo prosty - po zaznaczeniu sprawdzane są wszystkie 3 pola wyboru - pierwsze dwa jeśli są zaznaczone to dodawane są punkty, jeśli nie - punkty są odejmowane oraz pola zostają zaznaczone (aby pokazać użytkownikowi poprawne odpowiedzi). Z 3 checboxem jest odwrotnie jeśli nie jest zaznaczony punkty są dodawane, w przeciwnym razie odejmowane, a pole jest odznaczane.

Jak się pewnie domyśliliście już jeśli element jest zaznaczony to jego wartość checked ma wartość true, w przeciwnym razie flalse .

Troszkę inaczej jest z polami typu RADIO - tutaj jak wiecie każdy taki element ma taką samą nazwę - więc nie ma możliwości odwołania typu window.document.formularz.nazwa.checked . Ale to nic strasznego - JS numeruje poszczególne elementy, tworzona jest tablica nazwaelementu[i] - numerowana jak to przystaje na tablicę od 0 czyli na przykład mamy formularz o nazwie "ankieta" oraz pola typu radio i każdy z nich nazywa sie odpowiedz, więc sprawdzenie czy 1 element jest zaznaczony wyglądałoby :
if ( window.document.ankieta.odpowiedz[0].checked == true )

I analogicznie, jeśli chcielibyśmy go zaznaczyć wystarczy wpisać : window.document.ankieta.odpowiedz[0].checked = true

Jest jeszcze inne rozwiązanie - należy dodać do elementów radio znacznik id przykładowo <input type="radio" name="odpowiedz" id="odpo1" value="costam"/> i teraz jeśli chcemy sprawdzić czy ten element jest zaznaczony (zakładamy, że jest to 1 element radio w naszym formularzu) piszemy :
if ( document.getElementById("odpo1").checked == true )
{
    document.write("Element 1 jest zaznaczony");
}
Ma to dobre zastosowanie jeśli na przykład mamy stronę gdzie jest wiele formularzy - jak widzicie powyżej wcale nie musimy wiedzieć, w którym formularzu jest dany element.Atrybut id można umieszczać nie tylko dla elementów formularza, ale również dla innych jak na przykład IMG.

Bardzo podobnie jest z elementem typu SELECT - jednak tutaj już nie checked a selected oraz nie odwołujemy się do tablicy nazwa[i] tylko options[i], czyli na przykład sprawdzenie czy 1 element na liście jest zaznaczony :
if ( window.document.ankieta.options[0].selected == true )

Oraz zaznaczenie : window.document.ankieta.options[0].selected = true

Jeżeli zechcielibyśmy tylko sprawdzić wartość zaznaczonego elementu - na przykład kiedy takie pole rozwijane jest bardzo długie możemy właśnie wykorzystać atrybut value :
var wybrany_wartosc = window.document.nazwaformularza.nazwaPolaSelect.value;

Jeśli zamiast wartości wybranej opcji chcielibyśmy uzyskać jej nr no to korzystamy z zapisu :
var wybrany_nr = window.document.nazwaformularza.nazwaPolaSelect.selectedIndex; - czyli jeśli wybrano pierwszą opcję na liście to atrybut selectedIndex będzie miał wartość 0, jeśli opcję drugą wartość 1 itd.

Jeśli ktoś z Was miał styczność z programowanie w środowisku Borland Builder zapewne dostrzega tutaj bardzo duże podobieństwo :)