f-style - Web дизайн

fillin-studio - web дизайн, написание сайтов и HTML страниц

СЕГОДНЯ

НА САЙТЕ

О нас

Наши работы

Советы вебмастеру

Сделать заказ

советы web-мастеру

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
  {
   alert("Вы должны ввести целое число в диапазоне от " + min + " до " + max + " !");
   eval(form + "." + input + ".select()");
   eval(form + "." + input + ".focus()");
   return false; 
  } 
}
-->
</script>

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

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

Если вам понадобится функция checkFloat для проверки правильности ввода вещественных чисел, то из условия if надо убрать следующую строчку "&& i.indexOf(".")==-1". Условие i.indexOf(".")==-1 проверяет наличие точки.

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

 if(i>=min && i<=max)
  return true;
 else
  {
   alert("Вы должны ввести вещественное число в диапазоне от " + min + " до " + max + " !");
   eval(form + "." + input + ".select()");
   eval(form + "." + input + ".focus()");
   return false; 
  } 
}
-->
</script>

Design by FiLLiN