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