На главную

Библиотека Интернет Индустрии I2R.ru

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » Web-программирование

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

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

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

Пример 1. Использование метода submit document.forms["имя формы"].submit() или
document.forms.имя формы.submit()

Проверку данных лучше всего оформить в виде отдельной функции и обращаться к ней при необходимости (пример 2). В данном случае создается функция validForm, которая проверяет, чтобы введенное в текстовом поле значение было больше нуля, но меньше десяти. При вводе текста или иного числа выводится предупреждение, сами данные формы отправляются только при корректно заданном числе.

Пример 2. Проверка данных формы

<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 onSubmit="validForm(this); return false">

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

<input type=submit value="Отправить">
</form>

</body>
</html>

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


Еще один способ отправки данных формы на сервер с предварительной их проверкой заключается в использовании события onClick. В форму добавляется обычная кнопка, на которую это событие и <навешиваем> (пример 3).

Пример 3. Использование события 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 onSubmit="return false">

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

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

</body>
</html>

Событие onSubmit, которое указано в теге FORM вроде и не нужно, но оно выполняет определенную задачу. Данные формы можно отправить на сервер и нажатием на кнопку Enter клавиатуры, когда фокус находится на элементе формы. Тогда происходит отправка на сервер, минуя наше событие onClick и соответственно проверку данных. Чтобы это не случилось, добавляем строку onSubmit="return false".

После получения введенного в текстовом поле значения, идет проверка на то, что это число и что оно меньше десяти, но больше нуля. Только в этом случае запускается метод submit. Обратите внимание, в данном случае аргументом функции validForm служит ключевое слово this.form, а не this, как в примере 2.

Влад Мержевич
htmlBook.Ru - для тех, кто делает сайты

Спонсор раздела

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100