JavaScript програмування WEB форм

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

Для «ручний» відправлення форми на сервер існує метод submit. Його використання таке (приклад 1).

Приклад 1. Використання методу submit

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

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

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

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

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="">

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 – Для тих, хто робить сайти

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*