theretalk.ru

    Главная      
Программирование
Самоучители:

Атрибут onSubmit - передача формы

   Атрибут onSubmit можно использовать только с тегами, определяющими формы:
  • <form onSubmit ="expr | function()"> . . . </form>
    Событие Submit возникает при нажатии кнопки, заданной тегом <input type="submit">. Такая кнопка обычно присутствует во всех формах, данные из которых могут пересылаться на Web-сервер.
    Поскольку все функции JavaScript выполняются на локальном компьютере, обработка событий Submit происходит без передачи каких-либо данных на сервер. Поэтому обработку событий, связанных с передачей данных формы, удобно выполнять в тех случаях, когда эти данные можно обработать локально, не пересылая их на сервер, либо когда перед передачей данных необходимо пролверить правильность заполнения формы. Функция-обработчик событий Submit должна возвращать булево значение, что дает возможность остановит процесс передачи данных формы. Если на языке JavaScript не используется проверка правильности введенных данных в форму, то это проверяется на сервере при помощи скрипта CGI (Common Gateway Interface). Если провести проверку правильности ввода можно избежать отправки неполных или неправильных данных (зачастую это не делается, а проверяется уже на сервере - ведь это лишних 2 показа баннера в случае ошибки - ох уж эта реклама). Приведем пример, в котором всеже проверяются данные на локальном компьютере, скажем непустое поле:

    Действующую модель примера приводить не буду в связи с тем, что здесь должен быть задействован еще и CGI скрипт, который должен помещаться на сервере.

<script language="JavaScript">
<!--
function formfre(f) {
if (f.value == "") {
alert ("Перед отправкой поле 'адрес' должно быть заполнено");
return false;
}
else {
return true;
}
}
//-->
</script>

<pre>
<form name="myForm"
method="post"
action="http://wdstudio.al.ru/cgi-bin/saveform.cgi"
onSubmit="formfre(myForm.ydate)">
Имя: <input type="text" size=30 name="yname"><br>
Адрес: <textarea name="ydate" rows=5
cols=50></textarea><p>
<input type="submit" value="Отправить">
</form>
</pre>
    В приведенном примере функция, вызываемая посредством атрибута обработчика событий onSubmit, прекращает передачу данных текущей формы на Web-сервер до тех пор, пока область текста ydate остается пустой. Для того чтобы остановить пересылку данных, функция formfre() возвращает значение false. Когда область текста ydate заполнена, функция возвращает значение true, тем самым разрешая передачу формы.
    Чтобы переслать данные HTML-формы на удаленный Web-сервер, нужна обработка данных на самом сервере при помощи CGI-скрипта. Технология CGI является всеобщим стандартом, который позволяет обрабатывать на сервере информацию, вводимую пользователем и обслуживать запросы пользователей, динамически формируя необходимые документы. Для создания CGI-программ можно использовать различные языки программирования, однако в настоящее время чаще всего применяют языки PERL(Practical Extraction and Report Language). В приведенном выше примере с помощью атрибута action тега <form> задается имя скрипта, который должен получить и обработать данные формы. Обработка может означать: поиск переданной информации в базе данных, внесение новой записи в базу, проверку правильности содержимого формы и т.д. Значение атрибута method задает метод передачи данных формы. Так, значение "post" определяет метод, при которомданные формы передаются скрипту, обрабатывающему их на сервере, как стандартный входной поток. Имя скрипта указывают в атрибуте action.
    Приведем пример CGI-скрипта на языке Perl который будет читать данные приведенной выше формы из входного потока, открывать HTML-файл для добавления записи и помещать к имеющемуся тексту данные формы. При этом напишем проще, используя библиотеку "cgi-lib.pl" ставшую уже стандартной. Скрипт запишем в файл "saveform.cgi":

#! /usr/bin/perl
# путь к Perl-у на сервере
reguire "cgi-lib.pl"; # используемая библиотека
&ReadParse; # функция из модуля cgi-lib.pl
open (F, ">>logo.htm"); # открытие файла для добавления
$theName = $in {'yname'}; # Из массива переносим в переменные
$theYdate = $in {'ydate'};
print F "<hr><b>$theName</b><hr>"; # производим запись в файл
print F "<dl><dd>$theYdate</dl>";
close (F); # закрываем logo.htm
    Читая данные формы из входного потока, скрипт записывает содержимое элементов формы в массив $in. Так, например элементу формы с именем ydate в Perl-программе соответствует элемент массива $in{'ydate'}. Затем скрипт дописывает новые данные в файл, используя запись вида ">>", поэтому объем файла будет увеличиваться с добавлением новых записей.

    В языке JavaScript отсутствуют клиентские средства для записи на диск, главным образом по соображениям защиты информации.

    Данные формы можно отсылать на сервер и по электронной почте, указав необходимый URL, начинающийся с mailto:. Ранее разбирался подобный пример, теперь будем говорить подробнее.


Интернет и сети
Самоучители:
Статьи:

theretalk.ru 2007-2008 г.

Rambler's Top100


на www.altavista.ru