Вход

Просмотр полной версии : Аквтивность неактивность кнопки по тексту формы


rusianvodka
20.06.2013, 04:56
Здравствуйте, суть вопроса: имеется 2-а поля.
Логин и Пароль.
Плюс кнопка входа.
Хотелось бы чтобы пока поля пустые, кнопка неактивна, как только введён текст в эти поля больше чем 3-и символа в каждое поле, кнопка становится активной.
Вот что я нагуглил набросал, но к сожалению не работает....(
Буду благодарен вашим наставлениям и исправлениям.


<script type="text/javascript">
//Код, выполняемый всегда
var usr=document.getElementById('user').value;
var pas=document.getElementById('password').value;
if((usr.length < 3) && (pas.length < 3))
{
document.getElementById('button').disabled=true;
} else
document.getElementById('button').disabled=false;

//Проверка полей
function checkFields(form){
if(form.name!="login") return false;
var usr=form.elements['usr'].value;
if(usr==''){
alert('Имя не может быть пустым');
form.elements['usr'].focus();
return false;
}
return true;
}
</script>


<form class="forma" action="" method="POST" name="login" onSubmit="return checkFields(this)">
<table border=0>
<tr>
<td>
<b>Имя:</b>
</td>
<td>
<input type="text" name="usr" id="user">
</td>
<tr>
<td>
<b>Пароль:</b>
</td>
<td>
<input type="password" name="passwd" id="password">
</td>
<tr>
<td colspan="2">
<input type="submit" value="Войти" name="but" id="button">
</td>
</table>
</form>

danik.js
20.06.2013, 07:13
//Код, выполняемый всегда

Что значит "всегда"? Код выполнится только в момент загрузки страницы. Причем в момент выполнения кода поля еще не успеют загрузиться и возникнет ошибка. Нужно этот код запускать по некоторому событию. В качестве события лучше всего подходит input событие полей. Навешиваем на оба поля обработчик и радуемся. До тех пор пока не протестим в IE8. А там печаль..

Solonik
20.06.2013, 11:21
<script type="text/javascript">
//Код, выполняемый всегда
function f(){
var usr= document.getElementById('us').value;
var pas= document.getElementById('pass').value;

if((usr.length < 3) && (pas.length < 3))
{
document.getElementById('butt').disabled=true;
} else
document.getElementById('butt').disabled=false;
}

//Проверка полей
function checkFields(form){
if(form.name!="login") return false;
var usr=form.elements['usr'].value;
if(usr==''){
alert('Имя не может быть пустым');
form.elements['usr'].focus();
return false;
}
return true;
}
</script>


<form class="forma" action="" method="POST" name="login" onSubmit="return checkFields(this)">
<table border=0>
<tr>
<td>
<b>Имя:</b>
</td>
<td>
<input type="text" name="usr" onchange="f()" id="us">
</td>
<tr>
<td>
<b>Пароль:</b>
</td>
<td>
<input type="password" name="passwd" onchange="f()" id="pass">
</td>
<tr>
<td colspan="2">
<input type="submit" value="Войти" name="but" id="butt" disabled="true">
</td>
</table>
</form>

попробуйте вот так у меня в ie, chrome работает.

Solonik
20.06.2013, 12:01
if((usr.length < 3) && (pas.length < 3))
{
document.getElementById('butt').disabled=true;
} else
document.getElementById('butt').disabled=false;
}

Вот эту строчку можно укоротить кстати
if((usr.length > 3) && (pas.length > 3))

document.getElementById('butt').disabled=false;

rusianvodka
20.06.2013, 14:51
Спасибо за помощь,
главная ошибка была и тут=)
if((pas.length < 5) || (usr.length < 5))

skrudjmakdak
20.06.2013, 14:56
document.getElementById('butt').disabled = ((usr.length < 3) || (pas.length < 3));

rusianvodka
20.06.2013, 14:57
document.getElementById('butt').disabled = ((usr.length < 3) || (pas.length < 3));

дада))) спасибо) увидел своюю глупую ошибку уже всё исправил и как раз написал)

rusianvodka
20.06.2013, 14:58
У меня возник другой вопрос.
Когда я ввожу логин и пароль.
Пока я не тыкну курсором по экрану кнопка не станет активной.
Тоесть я сначала ввожу логин после пароль нужной длинны,
После необходимо курсором тыкнуть в пустое поле странички и тогда кнопка становится активной.
А как избежать этого клика?

danik.js
20.06.2013, 15:13
В качестве события лучше всего подходит input событие полей
Но можно и keydown

rusianvodka
20.06.2013, 15:18
Но можно и keydown

Спасибо за уделение времени данной теме, но я вас не понимаю.
Могли бы вы объяснить по подробнее что, как, где,.
К сожалению в этой сфере я разбираюсь только со вчерашнего вечера)

danik.js
20.06.2013, 15:19
Вместо onchange использовать onkeydown. (Еслиб не IE8, то можно было бы и oninput).

rusianvodka
20.06.2013, 15:21
Вместо onchange использовать onkeydown. (Еслиб не IE8, то можно было бы и oninput).

спасибо, всё получилось неймоверно благодарен.