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


Пользователь месяца
Ixman Ixman 1-й за Октябрь
Очков активности: 693 0 тем, 33 сообщения, 14 баллов репутации
Сайт: o5cat.ru
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 96 Вне конкурса за определение пользователя месяца

  • Фотография Ixman
    #2

    Ixman (o5cat.ru)
    Очков активности: 85.5 Вне конкурса за определение пользователя месяца

  • Фотография yuran
    #3

    yuran (yurbol.ru)
    Очков активности: 82.5 0 тем, 55 сообщений, 1 балл репутации

  • Фотография BLIK
    #4

    BLIK
    Очков активности: 51 Вне конкурса за определение пользователя месяца

  • Фотография Mandarin
    #5

    Mandarin
    Очков активности: 51 0 тем, 34 сообщения, 1 балл репутации

  • Фотография WGN
    #6

    WGN (worldgamenews.com)
    Очков активности: 45 Вне конкурса за определение пользователя месяца

  • Фотография pozitron123
    #7

    pozitron123
    Очков активности: 31.5 2 темы, 15 сообщений, 1 балл репутации

  • Фотография алексс
    #8

    алексс
    Очков активности: 27 2 темы, 12 сообщений, 1 балл репутации

  • Фотография Андрей WPMasterKZ
    #9

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 19.5 0 тем, 13 сообщений, 1 балл репутации

  • Фотография Scool
    #10

    Scool (stostory.ru)
    Очков активности: 19.5 3 темы, 4 сообщения, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 31.10.2018
  • Яндекс выдача: 15.11.2018
Топ 5 участников по репутации


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

#1 Banderas

Banderas
  • Неактивные
  • 1168 сообщений
  • Репутация: 1
0

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

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

 

 

  • 0

I'm web-developer 

Magento one love!



#2 yury

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

Отправлено 17 June 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
  • Неактивные
  • 1168 сообщений
  • Репутация: 1

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

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

I'm web-developer 

Magento one love!



#4 yury

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

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

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

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


  • 0

#5 Banderas

Banderas
    Topic Starter
  • Неактивные
  • 1168 сообщений
  • Репутация: 1

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

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


  • 0

I'm web-developer 

Magento one love!



#6 xweb

xweb
  • Неактивные
  • 28 сообщений
  • Репутация: 0

Отправлено 27 July 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 July 2011 - 16:28

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


  • 0


#8 xweb

xweb
  • Неактивные
  • 28 сообщений
  • Репутация: 0

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

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

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


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

#9 AlexBurn

AlexBurn
  • Неактивные
  • 1 сообщений
  • Репутация: 0

Отправлено 21 September 2011 - 20:41

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

robot

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


Похожие темы

  Название темы Автор Статистика Последнее сообщение

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