
Do tej pory opisaliśmy już wiele różnych zagadnień, a teraz pora na artykuł poświęcony obsłudze formularzy w JavaScript.
Formularze, szczególnie w połączeniu z CSS i JavaScript, stanowią silną bazę do tworzenia elementów UI do interakcji z użytkownikiem.
Formularze w JavaScript
Przyjrzymy się od podstaw obsłudze formularzy HTML w JavaScript.
Znacznik form i document.form(s):
<form name="test"> <input name="el1" /> </form>
Dostęp do obiektu formularza:
document.forms["test"];
Dostęp do pola (elementu):
document.form[0].elements["el1"]; // lub też document.test.el1;
Będąc w formularzu możemy przekazać go do funkcji za pomocą this.form.
Input typu Checkbox
<form name="formularz"> <input type="checkbox" name="cb" id="cb" /> </form>
Przykład – obsługa pola typu Checkbox:
alert(document.forms.formularz.cb.checked); // lub document.forms.formularz.elements["cb"].checked ? "tak" : "nie";
Pole typu Radio
var f = document.forms.formularz; var btn = f.elements["radio"][0];
Otrzymujemy dostęp do btn.value i btn.checked.
Przykład:
<form name="formularz1" action="index.php" method="get"> <div> <input type="radio" name="radio1" value="x1" /> <input type="radio" name="radio1" value="x2" /> </div> </form>
Właściwość radio1 tego formularza będzie wskazywała listę wszystkich pól grupy radio1, więc odwołanie będzie wyglądać następująco:
document.forms.formularz1.radio1.length;
Do poszczególnych elementów tej grupy można się odwoływać przy użyciu nawiasu kwadratowego, np.:
document.forms.formularz1.radio1[0]; // lub metody item, np.: var f1 = document.forms.formularz1; f1.radio1.item(0); // uwaga na przeglądarkę safari
Więc jeśli trzeba się dowiedzieć, czy pierwsze pole (o indeksie 0) z grupy radio1 formularza formularz1 jest zaznaczone, należy napisać:
document.forms.formularz1.radio1[0].checked // lub document.forms.formularz1.radio1.item(0).checked
Value – pobierz wartość, ustaw wartość.
Generalnie jeśli chodzi o pola formularzy, do wartości wielu z nich odwołujemy się ostatecznie poprzez wywołanie .value, przykładowo document.forms[0].elements[1].value.
Oczywiście w podobny sposób możemy ustawić (zmienić dynamicznie) wartość dla danego pola formularza.
Przykład – ustawienie wartości pola formularza w JavaScript:
document.forms['formularz1'].imie.value = 'Jan';
Lista wyboru
<form name="formularz1" action="index.php" method="get"> <div> <select name="lista1" multiple> <option>pierwsza</option> <option>druga</option> </select> </div> </form>
// podaje index, lub -1 gdy nic nie wybrano var f = document.forms.formularz; var i = f.elements["lista"].selectedIndex;
Otrzymujemy dostęp do: value – wartość, text – tekst pola opcji inny sposób to options – tablica z opcjami, każde pole tej tablicy ma właściwość property, gdzie true oznacza że opcja jest wybrana.
Przykład:
var x_s = document.forms.NameOfForm.moja_lista.selectedIndex; alert(x_s);
Odwołania do list wyboru można zapisać w różnych postaciach:
document.forms.registerForm.elements["birthday[day]"].selectedIndex;
W nowszych przeglądarkach jest skrót do wybranej opcji:
var f = document.forms.formularz; f.elements["lista"].value;
Jednak dla maksymalnej zgodności lepiej napisać:
f.elemetns["lista"].options[f.elements["lista"].selectedIndex].value;
Pole typu Textarea
Mając pole typu textarea o nazwie text1, odwołamy się do niego poprzez kod:
document.forms.formularz1.text1.value;
Disabled i readOnly
Obiekty reprezentujące elementy formularza(np. input typu „text”), można wyłączyć lub ustawić „tylko do odczytu”, tak aby ich modyfikacja była niemożliwa.
Ustawienie disabled = true wyłącza pole, zmienia jednak także jego wygląd. Można tego uniknąć stosując atrybut readOnly.
Przykład:
<input type="text" name="imie" id="imie" /> <a href="javascript:turnOffTheField()">Kliknij, aby wyłączyć pole</a>
function turnOffTheField() { document.formularz1.imie.disabled = true; // document.formularz1.imie.readOnly = true; }
Więcej o obiektach formularzy
Całkowitą liczbę formularzy uzyskuje się w wyniku odczytania właściwości length:
var liczba_formularzy = document.forms.length;
Dostęp do poszczególnych formularzy:
document.forms["nazwa_formularza"] // lub document.forms.nazwa_formularza // lub document.forms[indeks_formularza]
Właściwości obiektu typu Form
– elements – tablica zawierająca elementy składowe formularza,
– length – liczba elementów formularza,
– name – wartość atrybutu name; nazwa formularza,
– acceptCharset – wartość atrybutu accept-charset; lista obsługiwanych stron kodowych,
– action – wartość parametru action; określenie, gdzie mają zostać wysłane dane z formularza,
– enctype – wartość parametru type; sposób kodowania danych dla metody POST,
– encoding – alternatywna nazwa właściwości enctype,
– method – wartość parametru type; tryb wysyłania danych do serwera,
– target – wartość parametru target, np. określenie ramki, do której mają zostać wysłane dane.
Metody
– reset() – resetuje wartości pól formularza,
– submit() – zatwierdza (wysyła) formularz.
Natomiast zdarzenia (events)
onreset – gdy naciśnięto przycisk Reset,
onsubmit – gdy naciśnięto przycisk Submit (wysłanie formularza).
Podsumowanie
To wszystko jeśli chodzi o podstawowe przetwarzanie elementów formularzy różnego typu w JavaScript, i uzyskiwanie z nich wartości.
W niedalekiej przyszłości opiszemy zarówno obsługę formularzy przy użyciu framework’ów JS, jak i znakomite formularze HTML5.