X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Управление активностью (enable) кнопки (submit)
Banderas
Banderas
Topic Starter сообщение 17.6.2011, 17:06; Ответить: Banderas
Сообщение #1


Подскажите как сделать, что бы кнопка в форме стала активной только после заполнения всех полей формы? Если поля не заполнены - кнопка неактивна; заполнены все поля - активна, данные можно отправлять. Спасибо :D
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 18.6.2011, 0:29; Ответить: yury_mw
Сообщение #2


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)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Banderas
Banderas
Topic Starter сообщение 18.6.2011, 15:00; Ответить: Banderas
Сообщение #3


Ухх... круто)) Спасибо огромное!
С типом 'file' тоже работает, единственное что осталось это проверить тип загружаемого файла.. я это успешно сделал на РНР, но может можно както сделать проверку на JS? Или же вызвать мой скрипт без перезагрузки?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 18.6.2011, 18:38; Ответить: yury_mw
Сообщение #4


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

Если хочется проверять без перезагрузки страницы — это нужен Аякс, но с Аяксом я — не очень. Про него поспрашивай других.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Banderas
Banderas
Topic Starter сообщение 18.6.2011, 21:19; Ответить: Banderas
Сообщение #5


Понял, сенкс! Думаю разберусь, лето.. время есть :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
xweb_mw
xweb_mw
сообщение 27.7.2011, 16:11; Ответить: xweb_mw
Сообщение #6


для проверки типа загружаемого файла берем имя файла из поля типа '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>

скрипт не проверял, но должен работать :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
matroskin8
matroskin8
сообщение 27.7.2011, 17:28; Ответить: matroskin8
Сообщение #7


Проверять расширение файла на клиентской стороне можно только в плане улучшения юзабилити. Все проверки входящих данных необходимо производить на стороне сервера... так что решение только на JavaScript - это лишь половина решения :D
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
xweb_mw
xweb_mw
сообщение 27.7.2011, 20:17; Ответить: xweb_mw
Сообщение #8


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

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


так что причин для волнения сейчас не вижу :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AlexBurn
AlexBurn
сообщение 21.9.2011, 21:41; Ответить: AlexBurn
Сообщение #9


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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Кто арбитражит на пушподписки? Пушподписки с нулевой активностью это накрутка?
14 Boymaster 3686 9.1.2024, 6:38
автор: Skyworker
Открытая тема (нет новых ответов) Управление репутацией в сети
Положительные отзывы, скрытая реклама, нивелирование негатива
2 KingArtur 1037 26.11.2020, 1:02
автор: KingArtur
Открытая тема (нет новых ответов) Веб мастер: управление, продвижение, оптимизация
Любые услуги по веб сайтам недорого.
2 Курыкин 2733 30.6.2018, 14:36
автор: mmkulikov
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыНадо поменять картинки кнопки и всё прочее.
Сделать круто, чтобы не стыдно за сайт
0 atavisma 2970 6.4.2017, 19:04
автор: atavisma
Открытая тема (нет новых ответов) Управление репутацией - полный спектр услуг.
0 ksoft 1276 10.3.2017, 15:51
автор: ksoft


 



RSS Текстовая версия Сейчас: 19.3.2024, 13:10
Дизайн