JavaScript
Wprowadzenie do JavaScript
Część 7



Informacje wprowadzane do formularzy są bardzo ważne dla wielu stron WWW. Informacja od użytkownika jest często odsyłana z powrotem do serwera. JavaScript pozwala kontrolować zawartość informacji zanim zostanie ona przesłana do serwera. Najpierw pragnę pokazać, w jaki sposób formularze mogą być kontrolowane. Później rzucimy okiem na możliwości przesyłania informacji za pomocą JavaScript lub HTML.

Przede wszystkim musimy utworzyć prosty skrypt. Strona HTML powinna zawierać dwa elementy tekstowe. Użytkownik ma wpisać swoje nazwisko do pierwszego i adres poczty elektronicznej do drugiego. Możesz wpisać dowolną treść i kliknąć na przycisku. Spróbuj także nie wpisać niczego i kliknąć.

Wpisz swoje nazwisko:

Wpisz adres swojej poczty elektronicznej:

Jeśli chodzi o pierwszy element, gdy nie podasz żadnej informacji, otrzymasz komunikat o błędzie. Dowolna inna informacja jest poprawna. Oczywiście nie chroni to przed podaniem błędnego nazwiska. Przeglądarka akceptuje nawet cyfry. Jeśli więc wpiszesz '17', otrzymasz komunikat 'Cześć, 17'!.
Drugi formularz jest nieco bardziej wyrafinowany. Spróbuj wpisać jakiś prosty ciąg, np. swoje nazwisko. Skrypt nie zadziała, dopóki w ciągu nie znajdzie się znak @. Kryterium zaakceptowania ciągu jest znak @. Sam znak @ będzie poprawny, choć raczej mało sensowny. Każdy adres poczty elektronicznej zawiera ten znak, więc kontrola tego znaku jest odpowiednim sprawdzianem.

Co wykonuje skrypt w przypadku tych dwóch formularzy i jak je sprawdza? Oto jego treść: 

<html>
<head>
<script language="JavaScript">
<!-- Hide

function test1(form) {
  if (form.text1.value == "")
    alert("Podaj ciąg znaków!")
  else { 
   alert("Cześć "+form.text1.value+"! Informacja poprawna!");
  }
}

function test2(form) {
  if (form.text2.value == "" || 
      form.text2.value.indexOf('@', 0) == -1) 
        alert("Niepoprawny adres poczty elektronicznej!");
  else alert("OK!");
}
// -->
</script>
</head>

<body>
<form name="first">
Wpisz swoje nazwisko:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Test" onClick="test1(this.form)">
<P>
Wpisz adres swojej poczty elektronicznej:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Test" onClick="test2(this.form)">
</body>

Najpierw rzuć okiem na kod HTML w części BODY. Tworzymy po prostu dwa elementy tekstowe i dwa przyciski. Przyciski wywołują funkcje test1(...) lub test2(...) zależnie od tego, który przycisk jest naciśnięty. Funkcjom przypisujemy this.form, aby móc później adresować właściwe elementy w funkcjach.
Funkcja test1(form) sprawdza, czy ciąg znaków jest pusty. Jest to robione za pomocą if (form.text1.value =="").... 'form' jest zmienną, która otrzymuje wartość 'this.form' w wywołaniu funkcji. Wartość wprowadzoną do formularza możemy otrzymać używając 'value' w kombinacji z form.text1. Aby sprawdzić, czy ciąg jest pusty, porównujemy go z "". Jeśli wprowadzony ciąg równa się "" oznacza to, że nie wprowadzono żadnej informacji. Użytkownik otrzyma komunikat o błędzie. Jeśli zostanie wprowadzony jakiś ciąg znaków, użytkownik otrzyma komunikat potwierdzający poprawność.
Problemem jest to, że użytkownik mógłby wpisać ciąg spacji. Jest to rozpoznawane jako poprawna informacja! Jeśli chcesz, możesz oczywiście wprowadzić sprawdzanie takich sytuacji i wykluczyć je. Sądzę, że jest to już całkiem proste.
A teraz przyjrzyjmy się funkcji test2(form). Funkcja ta porównuje ponownie wprowadzony ciąg znaków z ciągiem pustym "" aby upewnić się, czy cokolwiek zostało wpisane. Ale do polecenia if coś zostało dodane. || jest nazywane operatorem OR. Uczyłeś się o nim już w części szóstej Wprowadzenia.
Polecenie if sprawdza, czy pierwsze lub drugie porównanie jest prawdziwe. Jeśli przynajmniej jedno z nich jest prawdziwe, całe polecenie if jest prawdziwe i wykonywane jest następne polecenie. Oznacza to, że otrzymasz komunikat o błędzie wtedy, gdy ciąg jest pusty albo nie zawiera znaku @. Druga operacja w poleceniu if sprawdza, czy wpisany ciąg zawiera znak @.


Jakie pojawiają się możliwości wysyłania zawartości formularza. Najprostszą jest wysłanie za pomocą poczty elektronicznej. Jest to metoda, której przyjrzymy się nieco bliżej. Jeśli chcesz otrzymać od użytkownika zawartość formularza bez użycia poczty i po przetworzeniu go na serwerze, musisz się posłużyć skryptem CGI. Skryptu takiego mógłbyś potrzebować np. w charakterze systemu wyszukiwawczego (choćby takiego, jak Yahoo), gdzie użytkownik otrzymuje wynik niemal natychmiast po podaniu szukanych ciągów znaków. Nie musi wcale czekać, aż osoby obsługujące serwis przeczytają zawartość formularza. Jest to wykonywane automatycznie przez serwer. JavaScript nie dysponuje takimi możliwościami. Nawet gdy chcesz utworzyć książkę gości (guestbook), nie możesz zmusić serwera aby automatycznie dodawał informację do istniejącej strony za pomocą JavaScript. Tylko CGI potrafi to w tej chwili wykonywać. Oczywiście możesz utworzyć książkę gości aktualizowaną za pośrednictwem poczty elektronicznej. Musisz jednak wpisywać dane ręcznie. Ma to sens wtedy, gdy liczba odpowiedzi nie przekracza 1000 dziennie.
Poniższy skrypt to czysty kod HTML. JavaScript nie jest tutaj potrzebny! Oczywiście wtedy, gdy nie chcesz weryfikować wprowadzanej tu treści. Muszę zaznaczyć, że polecenie mailto nie działa w każdej przeglądarce, ale w większości nowszych programów - tak. 

<FORM METHOD=POST ACTION="mailto:your_email@goes.here">
<H3>Czy ta strona podoba Ci się?</H3>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="1">Zupełnie nie.<BR>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>Strata czasu.<BR>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="3">Najgorsze badziewie w całym Internecie.<BR>
  <INPUT NAME="submit" TYPE="SUBMIT" VALUE="Wyślij odpowiedź">
</FORM>
Gdy w definicji podasz swój adres pocztowy, otrzymasz odpowiedzi za pomocą poczty elektronicznej. Problem jednak w tym, że odpowiedź taka może wyglądać na pierwszy rzut oka nieco tajemniczo. Niekiedy wszystkie spacje są wypełniane znakiem '+', niekiedy '%20'. Moze%20to+wiec+niekiedy+wygladac%20w+taki+sposob. W sieci jest jednak parę programów, które zamieniają te hieroglify na nieco bardziej ludzką postać (choćby mail:Formatter - przyp. tłum.).


Jest jeszcze inna sympatyczna rzecz, która może uczynić Twoje formularze nieco bardziej przyjaznymi. Możesz określić już na początku, na które elementy kładziemy akcent. Albo możesz nakazać przeglądarce sprawdzanie, które informacje od użytkownika są niepoprawne. Oznacza to, że przeglądarka będzie od razu powodowała wprowadzenie kursora do określonego pola formularza, bez ingerencji użytkownika. Można to wykonać za pomocą następującgo skryptu. :

function setfocus() {
        document.first.text1.focus();
        return;
}

Skrypt ten kładzie nacisk na pierwszy element tekstowy w pokazanym wyżej skrypcie. Musisz określić nazwę całego formularza, który nosi nazwę first - oraz nazwę konkretnego elementu formularza - tutaj text1. Jeśli chcesz położyć akcent na ten element, gdy formularz jest ładowany, możesz dodać własność onLoad do znacznika <body>. Wygląda to na przykład tak:

<body onLoad="setfocus()">


Indeks - Część 1 - Część 2 - Część 3 - Część 4 - Część 5 - Część 6


Aktualizacja: 11 maja 1996
(c) 1996 by Stefan Koch