Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Аквтивность неактивность кнопки по тексту формы (https://javascript.ru/forum/css-html/39199-akvtivnost-neaktivnost-knopki-po-tekstu-formy.html)

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

Цитата:

Сообщение от rusianvodka
//Код, выполняемый всегда

Что значит "всегда"? Код выполнится только в момент загрузки страницы. Причем в момент выполнения кода поля еще не успеют загрузиться и возникнет ошибка. Нужно этот код запускать по некоторому событию. В качестве события лучше всего подходит 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

Цитата:

Сообщение от skrudjmakdak (Сообщение 257387)
document.getElementById('butt').disabled = ((usr.length < 3) || (pas.length < 3));

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

rusianvodka 20.06.2013 14:58

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

danik.js 20.06.2013 15:13

Цитата:

Сообщение от danik.js
В качестве события лучше всего подходит input событие полей

Но можно и keydown

rusianvodka 20.06.2013 15:18

Цитата:

Сообщение от danik.js (Сообщение 257399)
Но можно и keydown

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


Часовой пояс GMT +3, время: 09:16.