Суббота, 28.12.2024, 12:30
Приветствую Вас Гость

Меню сайта
Web-программирование
Категории раздела
Наш опрос
Какой браузер Вы используете?
Всего ответов: 1423
Статистика

Анализ веб сайтов
Главная » Статьи » Статьи o JavaScript

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

Для «ручной» отправки формы на сервер существует метод 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.

Категория: Статьи o JavaScript | Добавил: Rammstein (20.06.2010)
Просмотров: 3805 | Рейтинг: 0.0/0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Реклама
Поиск
Друзья сайта
Топ100- Веб-дизайн free counters