logo
close

Formularze w JavaScript

28 stycznia 2020
webo Komentarze: 0 Kategoria: Kurs JavaScript

Formularze na stronach WWW są używane zazwyczaj do zebrania danych od osób odwiedzających stronę, a następnie ich wysłanie do serwera WWW. Nic nie stoi jednak na przeszkodzie aby z danych wpisanych do formularza korzystać także po stronie klienta, czyli w przeglądarce – język JavaScript pozwala także na dostęp do formularzy znajdujących się na stronie WWW. Można m.in. odczytywać wprowadzane dane, zmieniać je, czy wysłać formularz do serwera. Nic nie stoi też na przeszkodzie aby utworzyć aplikację w oparciu o formularz HTML, która w całości będzie napisana w JavaScript.

Pisząc tą część kursu założyłem że potrafisz samodzielnie utworzyć formularz w języku HTML; jeżeli nie, to zapraszam do lekcji Formularze w HTML zamieszczonej w Kursie HTML – znajdziesz tam dokładne informacje jak tworzy się formularze w języku HTML.

Niektóre przykłady zamieszczone dalej będą pokazywać też wykorzystanie zdarzeń do sprawdzenia poprawności formularza przed jego wysłaniem. Dlatego też polecam przejrzenie lekcji Zdarzenia i ich obsługa, jeżeli jeszcze nie miałeś czy nie miałaś okazji tego zrobić.

Dostęp do obiektu formularza

Wszystkie formularze znajdujące się na stronie (może ich być więcej niż jeden) znajdują się w kolekcji document.forms. Do wybranego formularza można się odwołać poprzez jego indeks, jak poniżej:

document.forms[0]

Sposób ten ma jednak poważną wadę – wystarczy że na stronie pojawi się dodatkowy formularz umieszczony przed tym do którego się odwołujesz, a skrypty przestaną działać poprawnie. Dlatego zamiast odwołania poprzez indeks znacznie lepiej jest nadać formularzowi nazwę, po której będzie się można do niego odwołać.

Do nadana nazwy formularzowi służą atrybuty name oraz id. Jeżeli piszesz stronę w HTML, możesz zastosować dowolny z nich (można też podać obydwa); w XHTML dozwolony jest tylko atrybut id. Przykładowo tak może to wyglądać:

<form id="formularz" name="formularz" action="skrypt.php" method="post">
<!-- tutaj jest zawartość formularza -->
</form>

Aby odwołać się do tego formularza, użyj jako indeksu jego nazwy:

document.forms['formularz']

Jeżeli stosujesz atrybut name, to możesz do formularza odwołać się jeszcze w jeden sposób. Nie działa on niestety jeżeli stosujesz tylko atrybut id:

document.formularz

Powyższy zapis jest dość długi. Dlatego w celu uproszczenia skryptów warto przypisać sobie ten formularz do zmiennej, aby nie powtarzać tego przy każdym odwołaniu do niego:

var f = document.forms['formularz'];

Dostęp do kontrolek formularza

Wszystkie kontrolki formularza znajdują się w kolekcji elements w obiekcie formularza. Można się do nich odwoływać po indeksie lub po nazwie, analogicznie jak w przypadku odwołania do formularza:

document.forms['formularz'].elements[0]
document.forms['formularz'].elements['nazwa']
document.forms['formularz'].nazwa

Jak widać, najłatwiejszym sposobem odwołania się jest ten ostatni.

Każda kontrolka formularza też jest obiektem. Posiada on m.in. właściwości odpowiadające atrybutom których można użyć w języku HTML. Przykładowo każda kontrolka posiada właściwość value, która przechowuje bieżącą wartość. Można ją wyświetlić np. w taki sposób, korzystając z JavaScript:

<form id="formularz" name="formularz" action="skrypt.php" method="post">
<input type="text" name="imie">
</form>
alert (document.forms['formularz'].imie.value);

Możliwa jest też oczywiście zmiana wartości pól formularza:

document.forms['formularz'].imie.value = 'Daniel';

Przykładowo można utworzyć formularz z polem na wpisanie imienia i przyciskiem, który po kliknięciu spowoduje wyświetlenie pozdrowienia. Funkcja JavaScript która będzie wyświetlać pozdrowienie jest następująca:

function powitaj()
{
    var imie = document.forms['pozdrowienie'].imie.value;
    alert('Witaj, ' + imie + '!');
    return false;
}

Do kompletu potrzebny jest jeszcze formularz HTML – oto on:

<form id="pozdrowienie" action=""><div>
Podaj swoje imię: <input type="text" name="imie">
<button onclick="return powitaj()">Pozdrów!</button>
</div></form>

Podaj swoje imię: 

W powyższym przykładzie do znacznika <form> dodałem dodatkowo atrybut action, który jest wymagany przez standard.

Drugą rzeczą na którą warto zwrócić uwagę jest to że funkcja powitaj() zwraca wartość false. Wartość ta jest następnie zwracana w zdarzeniu obsługi kliknięcia onclick. Dzięki temu ostatniemu przeglądarka wie że zdarzenie zostało obsłużone i nie wywoła standardowej procedury jego obsługi (czyli nie przeładuje strony).

Sprawdzanie poprawności formularzy

Język JavaScript można też wykorzystać do sprawdzenia (inaczej mówiąc: walidacji) czy formularz jest wypełniony poprawnie. Przykładowo do powyższego przykładu można dodać sprawdzenie czy zostało wpisane imię:

function sprawdz_powitaj()
{
    // przypisanie obiektu pola tekstowego do zmiennej
    var pole_imie = document.forms['pozdrowienie2'].imie;
    // odczyt imienia
    var imie = pole_imie.value;
    // sprawdzenie czy imie jest wpisane
    if (imie != '')
        alert('Witaj, ' + imie + '!');
    else
    {
        alert('Wpisz swoje imię!');
        pole_imie.focus();
    }
    return false;
}
<form id="pozdrowienie2" action=""><div>
Podaj swoje imię: <input type="text" name="imie">
<button onclick="return sprawdz_powitaj()">Pozdrów!</button>
</div></form>

Podaj swoje imię: 

W praktyce sprawdzenie poprawności wypełnienia formularza zazwyczaj stosuje się przy formularzach które są wysyłane do skryptu na serwerze (np. napisanego w PHP). Takie rozwiązanie ma dwie zalety. Pierwsza zaleta jest taka że osoba wypełniająca formularz dostaje informację o błędzie od razu, bez konieczności czekania na odpowiedź od serwera. Drugą zaletą natomiast jest zmniejszone obciążenie serwera, gdyż większość problemów ze źle wypełnionymi formularzami zostanie wykryta przez skrypt JavaScript działający w przeglądarce klienta.

Oczywiście fakt że stosuje się sprawdzanie zawartości formularza za pomocą JavaScript nie zwalnia od konieczności sprawdzenia poprawności danych wysłanych do serwera – obsługę JavaScript w przeglądarce można bardzo prosto wyłączyć. Pamiętaj też że wiele osób (m.in. ja) domyślnie blokuje skrypty JavaScript i zezwala na nie tylko na wybranych, zaufanych stronach.

Po tym wstępie czas na praktyczny przykład jak realizuje się sprawdzanie poprawności formularzy, na przykładzie formularza zawierającego pola do wpisania imienia i nazwiska:

function sprawdz_formularz()
{
    // przypisanie obiektu formularza do zmiennej
    var f = document.forms['formularz'];
    // sprawdzenie imienia
    if (f.imie.value == '')
    {
        alert('Musisz wpisać imię!');
        f.imie.focus();
        return false;
    }
    // sprawdzenie nazwiska
    if (f.nazwisko.value == '')
    {
        alert('Musisz wpisać nazwisko!');
        f.nazwisko.focus();
        return false;
    }
    // formularz jest wypelniony poprawnie
    return true;
}
<form id="formularz" action="skrypt.php" method="post" 
    onsubmit="return sprawdz_formularz()"><div>
Podaj swoje imię: <input type="text" name="imie"><br>
Podaj swoje nazwisko: <input type="text" name="nazwisko"><br>
<input type="submit" value="Wyślij">
</div></form>

Bardziej rozbudowany skrypt do sprawdzania poprawności formularza może np. zaznaczać pola które wymagają poprawienia na czerwono (np. za pomocą czerwonej gwiazdki wyświetlonej obok czy też poprzez wyświetlenie ramki dookoła pola). Inną możliwością jest sprawdzenie wszystkich pól na raz, i na końcu wyświetlenie jednego większego komunikatu o wszystkich znalezionych problemach. Aby zrealizować tą ostatnią możliwość, powyższy skrypt można przerobić następująco:

function sprawdz_formularz()
{
    // zmienna przechowujaca komunikaty bledow
    var bledy = '';
    // przypisanie obiektu formularza do zmiennej
    var f = document.forms['formularz'];
    
    // sprawdzenie imienia
    if (f.imie.value == '')
        bledy += 'Musisz wpisać imię!\n';
    // sprawdzenie nazwiska
    if (f.nazwisko.value == '')
        bledy += 'Musisz wpisać nazwisko!\n';
    
    // sprawdzenie czy byly bledy 
    if (bledy == '')
        return true;
    else
    {
        alert(bledy);
        return false;
    }
}

Komentarze

Komentarz

Komentując, akceptujesz Politykę prywatności