Атрибут 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://dmsdesign.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:. Ранее разбирался подобный пример, теперь будем говорить подробнее.

Связь с электронной почтой средствами языка JavaScript

Использование адресов URL, начинающихся с mailto:, предоставляют дополнительные возможности разработчикам JavaScript-программ. Известно, что с помощью атрибута action в теге <form>, можно заать арес URL, к которому будут передаваться данные формы. Используя обработчик события Submit и обратившись к свойству action объекта form, можно динамически изменить значение атрибута action.
Задавая в этом атрибуте адрес URL типа milto:. . ., анные формы можно посылать как сообщения электронной почты на почтовый сервер для доставки получателю. Разберем пример:

Ведите текст сообщения, укажите адрес и затем нажмите кнопку.

Вот текст этой программы:
<script language="JavaScript">
<!--
function sendMail() {
if (document.forms[0].recipient.value == "") {
alert ("Не указан адресат!");
return false;
}
if (document.forms[0].message.value == "") {
alert ("Нет текста сообщени\я!");
return false;
}
if (document.forms[0].subject.value == "") {
document.forms[0].subject.value = "No subject";
}
document.forms[0].action = "mailto:"+
document.forms[0].recipient.value+ "?subject=" +
document.forms[0].subject.value;
return true
}
//-->
</script>

Ведите текст сообщения, укажите адрес и затем нажмите кнопку.<P>
<form method="post" enctype="text/plain">
<table border=0>
<tr>
<td aign="right"><B>To:</B></td>
<td><input type="text" name="recipient" size=60>
</td>
</tr>
<tr>
<td aign="right"><B>Subject:</B></td>
<td><input type="text" name="subject" size=60>
</td>
</tr>
<tr valign="top">
<td align="left"><B>Text:</B></td>
<td><textarea name="message" rows=4 cols=60></textarea>
</td></tr>
</table>
<hr>
<input type="submit" value="Отправить письмо" onClick="sendMail()">
</form>

Эта программа создает несколько полей ввода, предоставляя пользователю возможность задать адрес получателя (recipient), тему (subject) и текст сообщения электронной почты. Обратный электронный адрес останется по умолчанию вашего почтового клиента, - это просто форма и не нужно ее путать с почтовой службой.
Перед тем, как начнется пересылка сообщения, управление передается sendMail(), которая проверяет, задан ли адрес получателя и текст сообщения. Если что-то не ввеено, программа выдаст соответствующее сообщение и возвращает flse, останавливая таким образом передачу данных. Когда все введено правильно, программа изменяет значение свойства action формы и формирует адрес URL типа mailto: ..., который представляет собой адрес получателя, введенный пользователем. Если функция sendMail() возвращает значение true , данные передаются.

Динамическое назначение обработчика события

Кроме всего прочего, имеется возможность динамического назначения обработчиков событий для элементов ддокумента. Например, кнопка может быть создана с помощью тега, в котором атрибут обработчика события onClick не задан. Однако значение этого атрибута можно определить в дальнейшем, тоесть динамически задать для этой кнопки функцию-обработчик Click. Кроме того, в процессе работы программы определенные ранее обработчики событий могут быть сброшены или переопределены.

Рассмотрим документ, содержащий кнопку, для которой при выборе гиперсвязей задается тот или иной обработчик событий. В данном случае для кнопки переопределяется обработчик события Click, который активизирует JavaScript-функцию для загрузки нового документа. Имя загружаемого документа указывают путем присваивания свойству location текущего окна имени соответствующего файла. Кнопка создается без обработчика события, поэтому перед ее активизацией следует выбрать соответствующий файл щелчком мыши на одной из гиперсвязей.

Задать загрузку файла 1 при нажатии кнопки
Задать загрузку файла 2 при нажатии кнопки
Задать загрузку файла 3 при нажатии кнопки

<script language="JavaScript">
<!--
function button1() {
location = "1.htm";
}
function button2() {
location = "2.htm";
}
function button3() {
location = "3.htm";
}
//-->
</script>

<form>
<input name="but1" type="button" value="Загрузить файл">
</form><p>
<a href="#" onClick="document.forms[0].but1.onClick=button1()">
Задать загрузку файла 1 при нажатии кнопки </a><BR>
<a href="#" onClick="document.forms[0].but1.onClick=button2()">
Задать загрузку файла 2 при нажатии кнопки </a><BR>
<a href="#" onClick="document.forms[0].but1.onClick=button3()">
Задать загрузку файла 3 при нажатии кнопки </a>
В этом примере я специально написал неработающие функции, чтобы не делать HTML файлы и вы никуда не ушли с этой страницы при нажатии кнопки. Для того, чтобы все работало нужно просто заменить например location = "1.htm"; на window.location.href = "1.htm"; и так со всеми функциями.