Перейти к содержимому

Сервис обмена электронных валют


Управление активностью (enable) кнопки (submit)

#1 Banderas

Banderas
  • Пользователь
  • 1 168 сообщений
  • Репутация: 1
0

Отправлено 17 Июнь 2011 - 16:06

Подскажите как сделать, что бы кнопка в форме стала активной только после заполнения всех полей формы? Если поля не заполнены - кнопка неактивна; заполнены все поля - активна, данные можно отправлять. Спасибо :D

 

 

  • 0


#2 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 17 Июнь 2011 - 23:29

Banderas,
например, так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>form test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#tst_form fieldset{
float: left;
margin: 10px;
padding: 10px;
text-align: right;
}
#tst_form fieldset legend{
padding: 5px;
}
#tst_form input{
width: 200px;
}
#tst_form input#submit_button{
width: 100px;
}
#tst_form input#reset_button{
width: 100px;
}
</style>
<script type="text/javascript">
function chk1(id) {
return (document.getElementById(id).value == '');
}
function chk() {
//проверяем, есть ли пустые поля с перечисленными id
flag = chk1('pole1') || chk1('pole2') || chk1('pole3');
//и переключаем доступность кнопки с id=submit_button
document.getElementById('submit_button').disabled = flag;
//можно дополнительно менять, например, надпись на кнопке и/или легенду, если раскомментировать следующие строки
// document.getElementById('submit_button').value = flag ? 'Пустые поля' : 'Готово';
// document.getElementById('legend').innerHTML = flag ? 'Заполните форму' : 'Форма заполнена';
return false;
}
</script>
</head>
<body onload="chk();">
<form action="action.php" method="post" id="tst_form" onkeyup="chk();" onmousemove="chk();" onclick="chk();">
<!-- Проверяем различные варианты действий пользователя при заполнении формы:
* onkeyup - набор с клавиатуры,
* onmousemove - движения мышью (например, если у пользователя включено автозаполнение форм
и он мышью выбирает ранее вводившиеся данные),
* onclick - клики по кнопкам -->
<fieldset>
<legend id="legend">Заполните форму</legend>
Поле1: <input id="pole1" name="pole1" type="text" value="" /><br />
Поле2: <input id="pole2" name="pole2" type="text" value="" /><br />
Поле3: <input id="pole3" name="pole3" type="text" value="" /><br />
<input id="submit_button" type="submit" value="Готово" />
<input id="reset_button" type="reset" value="Очистить" />
</fieldset>
</form>
</body>
</html>

  • 0

#3 Banderas

Banderas
    Topic Starter
  • Пользователь
  • 1 168 сообщений
  • Репутация: 1

Отправлено 18 Июнь 2011 - 14:00

Ухх... круто)) Спасибо огромное!
С типом 'file' тоже работает, единственное что осталось это проверить тип загружаемого файла.. я это успешно сделал на РНР, но может можно както сделать проверку на JS? Или же вызвать мой скрипт без перезагрузки?
  • 0


#4 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 18 Июнь 2011 - 17:38

Banderas
Проверять _любые_ загружаемые данные надо на сервере, средствами php.
В том числе и то, что засылает вышеуказанный код тоже надо проверять на сервере.
Потому что проверку JS легко обмануть, т.к. JS работает на компьютере клиента.
JS следует использовать лишь для создания комфорта для клиента, помощи и подсказок клиенту (например, как в рассматриваемом скрипте, подсказок о том, что еще не все необходимые поля формы заполнены), но не для контроля данных.

Если хочется проверять без перезагрузки страницы — это нужен Аякс, но с Аяксом я — не очень. Про него поспрашивай других.


  • 0

#5 Banderas

Banderas
    Topic Starter
  • Пользователь
  • 1 168 сообщений
  • Репутация: 1

Отправлено 18 Июнь 2011 - 20:19

Понял, сенкс! Думаю разберусь, лето.. время есть :)


  • 0


#6 xweb

xweb
  • Пользователь
  • 28 сообщений
  • Репутация: 0

Отправлено 27 Июль 2011 - 15:11

для проверки типа загружаемого файла берем имя файла из поля типа 'file', и проверяем расширение на допустимое.

<form name="forma_load" action = "" method="post">
<input type="file" name="load_file" value="">
</form>

<script type="text/javascript">

function verif_exp(name_file,s_exp)
{
var on_exp = false;

if ( name_file )
{
var data_file = name_file.split(".");
if ( data_file.length >= 2 )
{
var ch_exp = data_file[data_file.length - 1];
ch_exp=ch_exp.toLowerCase();
if ( ch_exp == "s_exp" )
on_exp = true;
}
}

return (on_exp);
}


var name_file = document.forma_load.load_file.value;
if ( verif_exp(name_file,"тут нужное расширение") )
{
alert("Все ок!");
}
else
{
alert("Не верный формат файла!");
}

</script>

скрипт не проверял, но должен работать :)
  • 0

#7 matroskin8

matroskin8
  • Пользователь PRO
  • 767 сообщений
  • Репутация: 143

Отправлено 27 Июль 2011 - 16:28

Проверять расширение файла на клиентской стороне можно только в плане улучшения юзабилити. Все проверки входящих данных необходимо производить на стороне сервера... так что решение только на JavaScript - это лишь половина решения :D


  • 0


#8 xweb

xweb
  • Пользователь
  • 28 сообщений
  • Репутация: 0

Отправлено 27 Июль 2011 - 19:17

Так я с этим и не спорю :D К тому же Banderas написал что проверку на PHP сделал

С типом 'file' тоже работает, единственное что осталось это проверить тип загружаемого файла.. я это успешно сделал на РНР, но может можно както сделать проверку на JS? Или же вызвать мой скрипт без перезагрузки?


так что причин для волнения сейчас не вижу :)
  • 0

#9 AlexBurn

AlexBurn
  • Пользователь
  • 1 сообщений
  • Репутация: 0

Отправлено 21 Сентябрь 2011 - 20:41

А можете подсказать, как к скрипту проверки заполняемости формы, поставить что бы кнопка которая активна и не активна, были картинки?
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru