Сайтостроительство

       

JavaScript и HTML-формы


Начнем с самого простого - подтверждения отправки HTML-формы. Для совместного использования JavaScript и HTML-формы надо задать параметр name команды form, чтобы из JavaScript можно было обращаться к объектам HTML-формы.

<form method="POST" action="/cgi-bin/gb_show.exe" name="testform"> ... <input type="button" value="Отправить данные формы" onClick="if(confirm('Вы уверены?')){testform.submit();}"> </form>

Обратите внимание, что кнопка "Отправить данные формы" задается посредством type=buttom, а не type=submit, т.к. отправка формы будет происходить не всегда, а в зависимости от подтверждения пользователя. Ниже можете нажать на кнопку и посмотреть результат действия HTML-скрипта. При ответе ДА, данные формы отправятся на сервер, при ответе НЕТ, ничего не произойдет. Такое подтверждение полезно при удалении или редактировании каких-либо данных. Мы использовали такие HTML-формы при создании администраторского доступа к форуму и гостевой книге, где имелась возможность редактировать и удалять записи.

Далее мы рассмотрим правильность ввода данных. Такие функции полезны для клиента, в случае ошибки ему не придется ждать отправки данных на сервер и получения отрицательного результата. Для проверки ввода целого числа в диапазоне от -5 до 10 используйте следующий код.

<script language="JavaScript"> <!-- function checkInt(form, input, min, max) { var i = eval(form + "." + input + ".value");

if(i>=min && i<=max && i.indexOf(".")==-1) return true; else { void(0); + min + " до " + max + " !"); eval(form + "." + input + ".select()"); eval(form + "." + input + " "); return false; } } --> </script>

Введите целое от -5 до 10 <input type="text" name="int510" size=40 onBlur="checkInt('testform','int510',-5,10);">

При попытке переключиться на другой элемент формы будет вызвана функция JavaScript checkInt. На вход этой функции передается четыре параметра: имя формы, имя объекта ввода данных, минимальное и максимальное значение.



Содержание раздела