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.

Dominik Wlazłowski

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

     

Podaj dalej: 12101