Korzystanie z JavaScript i formularzy

Javascript nosi wiele kapeluszy. Możesz użyć JavaScript do tworzenia efektów specjalnych. Możesz użyć JavaScript, aby uczynić swoje strony HTML "inteligentniejszymi", wykorzystując jego możliwości podejmowania decyzji. Możesz też używać JavaScript do ulepszania formularzy HTML. To ostatnie zastosowanie ma szczególne znaczenie. Ze wszystkich kapeluszy, które może nosić JavaScript, jego funkcje przetwarzania kształtu należą do najbardziej poszukiwanych i używanych.

Nic nie budzi większego strachu w sercu wydawcy internetowego niż te trzy litery: CGI. CGI (co oznacza wspólny interfejs bramy) to mechanizm bezpiecznego przesyłania danych z klienta (przeglądarki) na serwer. Zwykle jest używany do przesyłania danych z formularza HTML na serwer.

Mając JavaScript po swojej stronie, możesz przetwarzać proste formularze bez wywoływania serwera. A jeśli przesłanie formularza do programu CGI jest konieczne, możesz poprosić JavaScript o spełnienie wszystkich wymagań wstępnych, takich jak walidacja danych wejściowych, aby upewnić się, że użytkownik wykroił wszystkie i. W tej kolumnie przyjrzymy się bliżej połączeniu z formularzem JavaScript, w tym jak używać obiektu formularza JavaScript, jak odczytywać i ustawiać zawartość formularza oraz jak wyzwalać zdarzenia JavaScript poprzez manipulowanie kontrolkami formularza. Omówimy również, jak używać JavaScript do weryfikacji danych wejściowych formularza i przesyłać formularz do programu CGI.

Nauka JavaScript

Ten artykuł jest częścią archiwum zawartości technicznej JavaWorld. Możesz dowiedzieć się wiele o programowaniu w JavaScript czytając artykuły z serii JavaScript , pamiętaj tylko, że niektóre informacje mogą być nieaktualne. Zobacz „Korzystanie z wbudowanych obiektów JavaScript” i „Debugowanie programów JavaScript”, aby uzyskać więcej informacji na temat programowania w języku JavaScript.

Tworzenie formularza

Istnieje kilka różnic między prostym formularzem HTML a formularzem wzbogaconym o JavaScript. Głównym z nich jest to, że formularz JavaScript opiera się na jednym lub kilku programach obsługi zdarzeń, takich jak onClick lub onSubmit. Wywołują one akcję JavaScript, gdy użytkownik wykona jakąś czynność w formularzu, na przykład kliknie przycisk. Procedury obsługi zdarzeń, które są umieszczane wraz z pozostałymi atrybutami w tagach formularza HTML, są niewidoczne dla przeglądarki, która nie obsługuje JavaScript. Z powodu tej cechy często można używać jednego formularza zarówno dla przeglądarek JavaScript, jak i innych przeglądarek.

Typowe obiekty kontrolne formularzy - zwane także „widżetami” - obejmują:

  • Pole tekstowe do wprowadzania linii tekstu
  • Przycisk do wyboru akcji
  • Przyciski radiowe umożliwiające dokonanie jednego wyboru z grupy opcji
  • Pola wyboru do zaznaczania lub odznaczania pojedynczej, niezależnej opcji

Nie będę zawracał sobie głowy wyliczaniem wszystkich atrybutów tych kontrolek (widżetów) i jak ich używać w HTML. Większość odnośników w HTML zawiera szczegółowe informacje. W przypadku korzystania z JavaScript należy zawsze pamiętać o podaniu nazwy samego formularza i każdej używanej kontrolki. Nazwy umożliwiają odwoływanie się do obiektu na stronie wzbogaconej o JavaScript.

Typowa forma wygląda następująco. Zauważ, że podałem atrybuty NAME = dla wszystkich kontrolek formularza, w tym samego formularza:

 Enter something in the box:

  • FORM NAME = "myform" definiuje i nazywa formularz. W innym miejscu JavaScript możesz odwołać się do tego formularza, używając nazwy myform . Nazwa, którą nadasz formularzowi, zależy od Ciebie, ale powinna być zgodna ze standardowymi regułami nazewnictwa zmiennych / funkcji JavaScript (bez spacji, żadnych dziwnych znaków z wyjątkiem podkreślenia itp.).
  • ACTION = "" określa, w jaki sposób przeglądarka ma obsługiwać formularz po przesłaniu go do programu CGI działającego na serwerze. Ponieważ ten przykład nie jest przeznaczony do przesyłania czegokolwiek, adres URL programu CGI jest pomijany.
  • METHOD = "GET" określa metodę przekazywania danych do serwera podczas przesyłania formularza. W tym przypadku atrybut jest puffer, ponieważ przykładowy formularz niczego nie zgłasza.
  • INPUT TYPE = "tekst" definiuje obiekt pola tekstowego. To jest standardowy znacznik HTML.
  • INPUT TYPE = „przycisk” definiuje obiekt przycisku. To jest standardowy znacznik HTML z wyjątkiem modułu obsługi onClick.
  • onClick = "testResults (this.form)" jest programem obsługi zdarzenia - obsługuje zdarzenie, w tym przypadku kliknięcie przycisku. Po kliknięciu przycisku JavaScript wykonuje wyrażenie w cudzysłowie. Wyrażenie nakazuje wywołać funkcję testResults w innym miejscu strony i przekazać do niej bieżący obiekt formularza.

Pobieranie wartości z obiektu formularza

Poeksperymentujmy z uzyskiwaniem wartości z obiektów formularza. Załaduj stronę, a następnie wpisz coś w polu tekstowym. Kliknij przycisk, a wpisany tekst zostanie wyświetlony w polu ostrzeżenia.

Listing 1. testform.html

  Test Input  function testResults (form) { var TestVar = form.inputbox.value; alert ("You typed: " + TestVar); }    Enter something in the box:

Oto jak działa skrypt. JavaScript wywołuje funkcję testResults po kliknięciu przycisku w formularzu. Funkcja testResults jest przekazywana do obiektu formularza przy użyciu składni this.form (słowo kluczowe this odwołuje się do kontrolki przycisku; form jest właściwością kontrolki przycisku i reprezentuje obiekt formularza). Dałem obiektowi formularza nazwę formularza wewnątrz funkcji testResult, ale możesz dowolnie nazwać.

Funkcja testResults jest prosta - po prostu kopiuje zawartość pola tekstowego do zmiennej o nazwie TestVar. Zwróć uwagę, w jaki sposób odwoływano się do zawartości pola tekstowego. Zdefiniowałem obiekt formularza, którego chciałem użyć (zwany formularzem ), obiekt w formie, którą chciałem (nazywany pudełkiem wejściowym ) i właściwość tego obiektu, który chciałem ( właściwość value ).

Więcej z JavaWorld

Chcesz więcej samouczków i wiadomości dotyczących programowania? Otrzymuj biuletyn JavaWorld Enterprise Java dostarczony do Twojej skrzynki odbiorczej.

Ustawianie wartości w obiekcie formularza

Właściwość value pola input, pokazana w powyższym przykładzie, jest zarówno do odczytu, jak i do zapisu. Oznacza to, że możesz przeczytać wszystko, co jest wpisane w polu, i możesz ponownie zapisać w nim dane. Proces ustawiania wartości w obiekcie formularza jest tylko odwrotnością jego odczytu. Oto krótki przykład pokazujący ustawienie wartości w polu tekstowym formularza. Proces jest podobny do poprzedniego przykładu, z tym że tym razem są dwa przyciski. Kliknij przycisk „Czytaj”, a skrypt odczyta to, co wpisałeś w polu tekstowym. Kliknij przycisk „Napisz”, a skrypt wypisze szczególnie ponurą frazę w polu tekstowym.

Listing 2. set_formval.html

Test Input function readText (form) { TestVar =form.inputbox.value; alert ("You typed: " + TestVar); }

function writeText (form) { form.inputbox.value = "Have a nice day!" } Enter something in the box:

  • Po kliknięciu przycisku „Czytaj” JavaScript wywołuje funkcję readText, która odczytuje i wyświetla wartość wpisaną w polu tekstowym.
  • Po kliknięciu przycisku „Zapisz” JavaScript wywołuje funkcję writeText, która pisze „Miłego dnia!” w polu tekstowym.

Czytanie innych wartości obiektów formularza

Pole tekstowe jest prawdopodobnie najpopularniejszym obiektem formularza, który będziesz czytać (lub pisać) za pomocą JavaScript. Możesz jednak używać JavaScript do odczytywania i zapisywania wartości z większości innych obiektów (pamiętaj, że JavaScript nie może obecnie być używany do odczytu lub zapisu danych za pomocą pola tekstowego hasła). Oprócz pól tekstowych JavaScript może być używany z:

  • Ukryte pole tekstowe (TYPE = „ukryte”).
  • Przycisk opcji (TYPE = "radio")
  • Pole wyboru (TYPE = "pole wyboru")
  • Obszar tekstowy ()
  • Listy ()

Korzystanie z ukrytych pól tekstowych

From a JavaScript standpoint, hidden text boxes behave just like regular text boxes, sharing the same properties and methods. From a user standpoint, hidden text boxes "don't exist" because they do not appear in the form. Rather, hidden text boxes are the means by which special information can be passed between server and client. They can also be used to hold temporary data that you might want to use later. Because hidden text boxes are used like standard text boxes a separate example won't be provided here.

Using Radio Buttons

Radio buttons are used to allow the user to select one, and only one, item from a group of options. Radio buttons are always used in multiples; there is no logical sense in having just one radio button on a form, because once you click on it, you can't unclick it. If you want a simple click/unclick choice use a check box instead (see below).

To define radio buttons for JavaScript, provide each object with the same name. JavaScript will create an array using the name you've provided; you then reference the buttons using the array indexes. The first button in the series is numbered 0, the second is numbered 1, and so forth. Note that the VALUE attribute is optional for JavaScript-only forms. You'll want to provide a value if you submit the form to a CGI program running on the server, however.

Following is an example of testing which button is selected. The for loop in the testButton function cycles through all of the buttons in the "rad" group. When it finds the button that's selected, it breaks out of the loop and displays the button number (remember: starting from 0).

LIsting 3. form_radio.html

  Radio Button Test  function testButton (form){ for (Count = 0; Count < 3; Count++) { if (form.rad[Count].checked) break; } alert ("Button " + Count + " is selected"); }

Setting a radio button selection with HTML market is simple. If you want the form to initially appear with a given radio button selected, add the CHECKED attribute to the HTML markup for that button:

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the index of the radio button array you want to checked.

form.rad[0].checked = true; // sets to first button in the rad group

Using Check Boxes

Check boxes are stand-alone elements; that is, they don't interact with neighboring elements like radio buttons do. Therefore they are a bit easier to use. Using JavaScript you can test if a check box is checked using the checked property, as shown here. Likewise, you can set the checked property to add or remove the checkmark from a check box. In this example an alert message tells you if the first check box is checked. The value is true if the box is checked; false if it is not.

Listing 4. form_check.html

  Checkbox Test  function testButton (form){ alert (form.check1.checked); }

Checkbox 1

Checkbox 2

Checkbox 3

As with the radio button object, add a CHECKED attribute to the HTML markup for that check box you wish to be initially check when the form is first loaded.

Checkbox 1>

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the name of the checkbox you want to check, as in

form.check1.checked = true;

Using Text Areas

Obszary tekstowe służą do wprowadzania tekstu w wielu wierszach. Domyślny rozmiar pola tekstowego to 1 wiersz na 20 znaków. Możesz zmienić rozmiar za pomocą atrybutów COLS i ROWS. Oto typowy przykład obszaru tekstowego z polem tekstowym o szerokości 40 znaków i 7 wierszach:

Możesz użyć JavaScript, aby odczytać zawartość pola obszaru tekstowego. Odbywa się to za pomocą właściwości value. Oto przykład: