Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.06.2013, 04:56
Новичок на форуме
Отправить личное сообщение для rusianvodka Посмотреть профиль Найти все сообщения от rusianvodka
 
Регистрация: 20.06.2013
Сообщений: 6

Аквтивность неактивность кнопки по тексту формы
Здравствуйте, суть вопроса: имеется 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>
Ответить с цитированием
  #2 (permalink)  
Старый 20.06.2013, 07:13
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от rusianvodka
//Код, выполняемый всегда
Что значит "всегда"? Код выполнится только в момент загрузки страницы. Причем в момент выполнения кода поля еще не успеют загрузиться и возникнет ошибка. Нужно этот код запускать по некоторому событию. В качестве события лучше всего подходит input событие полей. Навешиваем на оба поля обработчик и радуемся. До тех пор пока не протестим в IE8. А там печаль..
Ответить с цитированием
  #3 (permalink)  
Старый 20.06.2013, 11:21
Интересующийся
Отправить личное сообщение для Solonik Посмотреть профиль Найти все сообщения от Solonik
 
Регистрация: 14.06.2013
Сообщений: 29

<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 работает.
Ответить с цитированием
  #4 (permalink)  
Старый 20.06.2013, 12:01
Интересующийся
Отправить личное сообщение для Solonik Посмотреть профиль Найти все сообщения от Solonik
 
Регистрация: 14.06.2013
Сообщений: 29

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;
Ответить с цитированием
  #5 (permalink)  
Старый 20.06.2013, 14:51
Новичок на форуме
Отправить личное сообщение для rusianvodka Посмотреть профиль Найти все сообщения от rusianvodka
 
Регистрация: 20.06.2013
Сообщений: 6

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

Последний раз редактировалось rusianvodka, 20.06.2013 в 14:56.
Ответить с цитированием
  #6 (permalink)  
Старый 20.06.2013, 14:56
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

document.getElementById('butt').disabled = ((usr.length < 3) || (pas.length < 3));
Ответить с цитированием
  #7 (permalink)  
Старый 20.06.2013, 14:57
Новичок на форуме
Отправить личное сообщение для rusianvodka Посмотреть профиль Найти все сообщения от rusianvodka
 
Регистрация: 20.06.2013
Сообщений: 6

Сообщение от skrudjmakdak Посмотреть сообщение
document.getElementById('butt').disabled = ((usr.length < 3) || (pas.length < 3));
дада))) спасибо) увидел своюю глупую ошибку уже всё исправил и как раз написал)
Ответить с цитированием
  #8 (permalink)  
Старый 20.06.2013, 14:58
Новичок на форуме
Отправить личное сообщение для rusianvodka Посмотреть профиль Найти все сообщения от rusianvodka
 
Регистрация: 20.06.2013
Сообщений: 6

У меня возник другой вопрос.
Когда я ввожу логин и пароль.
Пока я не тыкну курсором по экрану кнопка не станет активной.
Тоесть я сначала ввожу логин после пароль нужной длинны,
После необходимо курсором тыкнуть в пустое поле странички и тогда кнопка становится активной.
А как избежать этого клика?
Ответить с цитированием
  #9 (permalink)  
Старый 20.06.2013, 15:13
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от danik.js
В качестве события лучше всего подходит input событие полей
Но можно и keydown
Ответить с цитированием
  #10 (permalink)  
Старый 20.06.2013, 15:18
Новичок на форуме
Отправить личное сообщение для rusianvodka Посмотреть профиль Найти все сообщения от rusianvodka
 
Регистрация: 20.06.2013
Сообщений: 6

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать disabled кнопки во время отправки формы? Bad Request Events/DOM/Window 7 16.04.2014 13:49
Как добавить кнопки к каждому полю формы SaltoMortale ExtJS 2 07.08.2012 12:22
отключение кнопки формы sc2r2bey Элементы интерфейса 2 23.07.2009 15:08