Използване на JavaScript и формуляри

Javascript носи много шапки. Можете да използвате JavaScript за създаване на специални ефекти. Можете да използвате JavaScript, за да направите своите HTML страници „по-интелигентни“, като използвате възможностите за вземане на решения. И можете да използвате JavaScript за подобряване на HTML формите. Това последно приложение е от особено значение. От всички шапки, които JavaScript може да носи, функциите му за обработка на форми са сред най-търсените и използвани.

Нищо не поражда по-голям страх в сърцето на уеб издател от тези три букви: CGI. CGI (което означава общ шлюзов интерфейс) е механизъм за безопасен транспорт на данни от клиент (браузър) до сървър. Обикновено се използва за прехвърляне на данни от HTML форма към сървъра.

С JavaScript от ваша страна можете да обработвате прости формуляри, без да извиквате сървъра. И когато е необходимо подаване на формуляр в програма CGI, можете да накарате JavaScript да се погрижи за всички предварителни изисквания, като например валидиране на въведените данни, за да се гарантира, че потребителят е поставил точки на всеки i. В тази колона ще разгледаме отблизо връзката на JavaScript формуляра, включително как да използваме обект на формуляр на JavaScript, как да четем и задаваме съдържание на формуляра и как да задействаме събития на JavaScript чрез манипулиране на контролите на формуляра. Също така ще разгледаме как да използваме JavaScript за проверка на въвеждането на формуляра и да го поставим на програма CGI.

Изучаване на JavaScript

Тази статия е част от архива на техническото съдържание на JavaWorld. Можете да научите много за програмирането на JavaScript, като четете статии от поредицата на JavaScript , просто имайте предвид, че част от информацията вероятно е остаряла. Вижте „Използване на вградените обекти на JavaScript“ и „Отстраняване на грешки в програми за JavaScript“ за повече информация относно програмирането с JavaScript.

Създаване на формуляра

Има малко разлики между прав HTML формуляр и подобрен с JavaScript формуляр. Основното е, че JavaScript формуляр разчита на един или повече манипулатори на събития, като onClick или onSubmit. Те извикват действие на JavaScript, когато потребителят прави нещо във формата, като щракване върху бутон. Манипулаторите на събития, които се поставят с останалите атрибути в HTML таговете на формата, са невидими за браузър, който не поддържа JavaScript. Поради тази черта често можете да използвате една форма както за JavaScript, така и за браузъри, които не са JavaScript.

Типичните обекти за контрол на формуляри - наричани още "джаджи" - включват следното:

  • Текстово поле за въвеждане на ред текст
  • Бутон за избор на действие
  • Радио бутони за извършване на един избор между група опции
  • Поставете отметки в квадратчетата за избор или премахване на избор на една, независима опция

Няма да се притеснявам да изброявам всички атрибути на тези контроли (джаджи) и как да ги използвам в HTML. Повечето препратки към HTML ще ви предоставят подробности. За използване с JavaScript, винаги трябва да помните да предоставите име за самия формуляр и за всяка контрола, която използвате. Имената ви позволяват да препращате обекта към вашата подобрена с JavaScript страница.

Типичната форма изглежда така. Забележете, че предоставих атрибути NAME = за всички контроли на формуляра, включително самия формуляр:

 Enter something in the box:

  • FORM NAME = "myform" дефинира и назовава формата. На друго място в JavaScript можете да препращате към този формуляр с името myform . Името, което давате на формуляра си зависи от вас, но то трябва да отговаря на стандартните правила за именуване на променливи / функции (без интервали, без странни знаци, освен долната черта и т.н.).
  • ACTION = "" дефинира как искате браузърът да обработва формуляра, когато той е изпратен на CGI програма, работеща на сървъра. Тъй като този пример не е предназначен за изпращане на нищо, URL адресът за програмата CGI е пропуснат.
  • METHOD = "GET" дефинира данните на метода, които се предават на сървъра при подаване на формуляра. В този случай attibute е puffer, тъй като примерният формуляр не изпраща нищо.
  • INPUT TYPE = "text" определя обекта на текстовото поле. Това е стандартно HTML маркиране.
  • INPUT TYPE = "бутон" определя обекта на бутона. Това е стандартно HTML маркиране, с изключение на манипулатора onClick.
  • onClick = "testResults (this.form)" е манипулатор на събития - той обработва събитие, като в този случай щракнете върху бутона. При натискане на бутона JavaScript изпълнява израза в кавичките. Изразът казва да извикате функцията testResults другаде на страницата и да й предадете текущия обект на формуляр.

Получаване на стойност от обект на формуляр

Нека експериментираме с получаване на стойности от обекти на формуляри. Заредете страницата, след което напишете нещо в текстовото поле. Щракнете върху бутона и това, което сте въвели, се показва в полето за предупреждение.

Листинг 1. testform.html

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

Ето как работи скриптът. JavaScript извиква функцията testResults, когато щракнете върху бутона във формуляра. Функцията testResults се предава на обекта на формуляра, използвайки синтаксиса this.form (ключовата дума this се позовава на контрола на бутона; формулярът е свойство на контрола на бутона и представлява обекта на формуляра). Дадох на обекта на формата името на формата във функцията testResult, но можете да използвате произволно име, което искате.

Функцията testResults е проста - тя просто копира съдържанието на текстовото поле в променлива с име TestVar. Забележете как е посочено съдържанието на текстовото поле. Дефинирах обекта на формуляра, който исках да използвам (наречен формуляр ), обекта във формуляра, който исках (наречен inputbox ), и свойството на този обект, който исках ( свойството стойност ).

Още от JavaWorld

Искате повече уроци по програмиране и новини? Вземете бюлетина за JavaWorld Enterprise Java, доставен във вашата пощенска кутия.

Задаване на стойност в обект на формуляр

Свойството стойност на полето за въвеждане, показано в горния пример, е четимо и записваемо. Тоест, можете да прочетете всичко, което е въведено в полето, и можете да запишете данни обратно в него. Процесът на задаване на стойността в обект на форма е точно обратното на нейното четене. Ето кратък пример за демонстриране на задаване на стойност в текстово поле на формуляр. Процесът е подобен на предишния пример, освен че този път има два бутона. Щракнете върху бутона "Четене" и скриптът чете това, което сте въвели в текстовото поле. Щракнете върху бутона "Напиши" и скриптът записва особено неприятна фраза в текстовото поле.

Листинг 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:

  • Когато кликнете върху бутона „Четене“, JavaScript извиква функцията readText, която чете и показва стойността, която сте въвели в текстовото поле.
  • Когато кликнете върху бутона "Писане", JavaScript извиква функцията writeText, която пише "Приятен ден!" в текстовото поле.

Четене на други стойности на обект на форма

Текстовото поле е може би най-често срещаният обект на формуляр, който ще прочетете (или напишете) с помощта на JavaScript. Можете обаче да използвате JavaScript за четене и записване на стойности от повечето други обекти (имайте предвид, че понастоящем JavaScript не може да се използва за четене или запис на данни, като се използва текстовото поле за парола). В допълнение към текстовите полета, JavaScript може да се използва с:

  • Скрито текстово поле (ТИП = "скрито").
  • Бутон за избор (TYPE = "radio")
  • Поле за отметка (TYPE = "checkbox")
  • Област за текст ()
  • Списъци ()

Използване на скрити текстови полета

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

Текстовите области се използват за многоредово въвеждане на текст. Размерът по подразбиране на текстовото поле е 1 ред с 20 знака. Можете да промените размера, като използвате атрибутите COLS и ROWS. Ето типичен пример за текстова област с текстово поле с ширина 40 знака на 7 реда:

Можете да използвате JavaScript, за да прочетете съдържанието на полето за текстова област. Това се прави със свойството value. Ето пример: