Отправляет email-рассылки с помощью сервиса Sendsay

Рецепты HTML

  Все выпуски  

Рецепты HTML # 114


Информационный Канал Subscribe.Ru

 | Руководство | Дизайн и юзабилити | Графика | Создание и раскрутка сайта |
| Справочная информация | Инструментарий | Шаблоны | Все статьи | Форум |  

Добрый день.

Сегодня продолжение темы о формах и языке JavaScript - Отправка формы на сервер. Адрес статьи на сайте — www.htmlbook.ru/content/?id=195

Рекомендую посетить
Сайт www.wmzshop.ru (200 человек в день)
Предлагает обменяться ссылками.
Со стороны сайта www.wmzshop.ru
процесс обмена автоматический.
Для начала обмена пройдите сюда. http://www.wmzshop.ru/links/links.php

Отправка формы на сервер

Отправка данных формы происходит по нажатию на кнопку Submit. Часто при этом возникает задача проверить вначале данные на корректность и только в случае их правильности отсылать на сервер. В противном случае, следует вывести предупреждение об ошибке и вернуться к редактированию. Такая тактика называется «защита от дурака» и она не позволяет вводить заведомо неверные данные. Например, вы хотите от посетителя обязательно получить адрес электронной почты. Тогда во введенной строке должен содержаться символ @, который однозначно определяет, что это именно адрес, а не что иное, и не какой-нибудь адрес, а именно электронный. Также не должно быть пробелов и других недопустимых символов вроде русских букв. Только после того, как скрипт все проверит и даст добро, форму можно отправлять на сервер.

Для «ручной» отправки формы на сервер существует метод submit. Его использование таково.

document.forms["имя формы"].submit() или
document.forms.имя формы.submit()

Проверку данных лучше всего оформить в виде отдельной функции и обращаться к ней при необходимости. Использовать вызов через событие onSubmit нельзя, иначе произойдет и отправка формы без предварительного контроля. Поэтому вообще отказываемся от кнопки Submit, заменяя ее обычной кнопкой, на которую «навешен» вызов нужной функции через событие onClick.

<html>
<body>
<head>
<script language="JavaScript">

function validForm(f) {
d = parseInt(f.num.value); // Преобразуем в целое число
if(!d || d < 1 || d > 10) alert("Что-то неправильно введено") // Выводим предупреждение
else f.submit() // Отправляем на сервер
}

</script>
</head>

<body>

<form action=/cgi-bin/add.cgi>

Введите число от 1 до 10<br>
<input type=text name=num>

<input type=button value="Отправить" onClick="validForm(this.form)">
</form>

</body>
</html>

В примере отправка данных происходит только после выполнения нашей функции validForm. Чтобы не обращаться к форме через семейство forms, можно передать в качестве параметра значение this.form. Это гораздо короче и удобней, в самой функции теперь достаточно использовать f.submit() для отправки, где f — аргумент функции, указывающий на форму.

После получения введенного в текстовом поле значения, идет проверка на то, что это число и что оно меньше десяти, но больше нуля. Только в этом случае запускается метод submit.


Резюме

  • Использование обычной кнопки вместо Submit необходимо, когда данные перед отправкой на сервер следует проверить на определенные условия. Кнопка Submit вначале отсылает данные на сервер, а потом уже смотрит на события onClick или onSubmit.
  • Какие недостатки содержатся в приведенном подходе? Первое — пользователь может отключить у себя в браузере поддержку JavaScript. В простом случае, если отправлять данные нажатием кнопки Submit без предварительной проверки, то они попадут по назначению. В нашем случае, никакой кнопки Submit нет и для отправки данных обязательно должен быть включен JavaScript. Второе — предложенную в примере проверку данных легко обойти, если создать свой документ со всеми полями и отправить форму на обработчик, указанный параметром action. При этом не важно, где этот документ располагается, хоть на локальном компьютере, главное — указать к обработчику формы полный путь. Поэтому проверку серьезных данных, которые могут привести к нестабильной работе программы или ее зависанию, лучше проводить на стороне сервера.



bottom


Браузер Internet Explorer Netscape Navigator Opera
Платформа Windows Macintosh Все платформы Все платформы

Версия

4.0 5.0 5.5 6.0 4.0 5.0 4.x 6.0 7.0 3.5 5.0 7.0
Поддерживается Нет Нет Да Да Нет Да Нет Да Да Нет Да Да

Описание
Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от параметра position, он обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).
При относительном позиционировании элемента, отсчет ведется от нижнего края родительского элемента (рис. 1), а при абсолютном — относительно нижнего края окна документа (рис. 2).

Рис. 1. Значение параметра bottom при относительном позиционирование элемента

Рис. 2. Значение параметра bottom при абсолютном позиционирование элемента

Синтаксис
bottom: значение | проценты | auto

Аргументы
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Значение параметра bottom может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента. Аргумент auto не изменяет положение элемента.

Значение по умолчанию
auto

Наследование
Значения, присвоенные данному параметру, не наследуются.

Пример
<html>
<body>

<div style="""bottom: 100px; position: absolute; background: #f0f0f0; padding: 10px: border: solid 1px black">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</div>

</body>
</html>

Применяется
Ко всем элементам.

Copyright 2002, 2003 Влад Мержевич, e-mail: vlad@htmlbook.ru
Материалы данного сайта охраняются законом об авторском праве.
Вы можете свободно использовать и распространять любые статьи с указанием автора и ссылки на сайт.


http://subscribe.ru/
E-mail: ask@subscribe.ru
Отписаться
Убрать рекламу

В избранное