Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.02.2011, 21:09
Аватар для Bandicoot
Кандидат Javascript-наук
Отправить личное сообщение для Bandicoot Посмотреть профиль Найти все сообщения от Bandicoot
 
Регистрация: 09.02.2011
Сообщений: 145

Активация кнопки отправления при заполнении текстового поля
Ребята, я новичок в jquery и мне нужна ваша помощь. Задача передо мной стоит такая: есть текстовое поле и кнопка, по умолчанию неактивная, но видимая. Как только пользователь начинает заполнять это поле (т.е. оно становится не пустым), кнопка активируется и при нажатии данные отправляются на сервер. С помощью каких селекторов это можно организовать?
Ответить с цитированием
  #2 (permalink)  
Старый 18.02.2011, 11:10
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

Ну можно к примеру при событии "onkeyup" выполнять функцию которая будет проверять содержимое и менять кнопку.
То есть как то так:
<html>
<head>
<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
function check() {
	if ($('#input').val() != '')
		$('#button').removeAttr('disabled');
	else
		$('#button').attr('disabled','disable');
}
</script>
</head>
<body>
<form>
<input type="text" onkeyup="check();" id="input" /><br />
<input type="submit" id="button" disabled="disabled"/>
</form>
</body>
</html>
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
  #3 (permalink)  
Старый 18.02.2011, 12:26
Аватар для Bandicoot
Кандидат Javascript-наук
Отправить личное сообщение для Bandicoot Посмотреть профиль Найти все сообщения от Bandicoot
 
Регистрация: 09.02.2011
Сообщений: 145

Спасибо! То что мне нужно!
Ответить с цитированием
  #4 (permalink)  
Старый 15.01.2014, 10:25
Новичок на форуме
Отправить личное сообщение для warriorbutch Посмотреть профиль Найти все сообщения от warriorbutch
 
Регистрация: 15.01.2014
Сообщений: 3

Как я давно искал ответ на этот вопрос. Спасибо огромное

Но есть загвоздка.
Мне нужно чтобы в форме из нескольких полей, кнопка активировалась при заполнении всех полей.
А у меня этот скриптик работает только если в форме одно поле <input>, если же их больше, то кнопка активируется при заполнении только первого поля, а не всех.

Как решить эту проблему?

Последний раз редактировалось warriorbutch, 15.01.2014 в 10:28.
Ответить с цитированием
  #5 (permalink)  
Старый 15.01.2014, 14:32
Аватар для Poznakomlus
Профессор
Отправить личное сообщение для Poznakomlus Посмотреть профиль Найти все сообщения от Poznakomlus
 
Регистрация: 13.03.2013
Сообщений: 1,255

<input type="text" onkeyup="send.disabled = this.value ? false : 'disabled';" id="input" /><br />
<input type="submit" id="send" disabled="disabled"/>


<form>
<input type="text" onkeyup="check();" id="input1" /><br />
<input type="text" onkeyup="check();" id="input2" /><br />
<input type="text" onkeyup="check();" id="input3" /><br />
<input type="submit" id="send" disabled="disabled"/>
</form>
  <script>
function check() {
  var inp1 = document.getElementById('input1'),
      inp2 = document.getElementById('input2'),
      inp3 = document.getElementById('input3');
  document.getElementById('send').disabled = inp1.value && inp2.value && inp3.value ? false : "disabled";
}
</script>

Последний раз редактировалось Poznakomlus, 15.01.2014 в 14:51.
Ответить с цитированием
  #6 (permalink)  
Старый 15.01.2014, 19:52
Новичок на форуме
Отправить личное сообщение для warriorbutch Посмотреть профиль Найти все сообщения от warriorbutch
 
Регистрация: 15.01.2014
Сообщений: 3

Круто, всё работает! Но опять мне всё не так как надо простите...

Этот код работает только на определённое количество полей input или только 3 или только 6. Если в коде указанно 3 поля, а в моей форме поля 2 - то ничего работать не будет.
Дело в том, что на моём сайте много форм и они все с разным количеством полей input

Есть такое решение?
Ответить с цитированием
  #7 (permalink)  
Старый 15.01.2014, 19:56
Аватар для Poznakomlus
Профессор
Отправить личное сообщение для Poznakomlus Посмотреть профиль Найти все сообщения от Poznakomlus
 
Регистрация: 13.03.2013
Сообщений: 1,255

<form>
<input type="text" onkeyup="check();" id="input1" /><br />
<input type="text" onkeyup="check();" id="input2" /><br />
<input type="submit" id="send" disabled="disabled" value="Отправить"/>
</form>
  <script>
function check() {
  var inp1 = document.getElementById('input1'),
      inp2 = document.getElementById('input2');
  document.getElementById('send').disabled = inp1.value && inp2.value ? false : "disabled";
}
</script>

для проверки форм и их значений используются скрипты валиидации. По гуглите их много и с разными возможностями. Текст, маил, телефон, цифры и т. д.

Последний раз редактировалось Poznakomlus, 15.01.2014 в 19:59.
Ответить с цитированием
  #8 (permalink)  
Старый 15.01.2014, 20:03
Новичок на форуме
Отправить личное сообщение для warriorbutch Посмотреть профиль Найти все сообщения от warriorbutch
 
Регистрация: 15.01.2014
Сообщений: 3

Спасибо! Мне кто-то советовал уже ))
И спасибо Вам огромное!

Правда валидатор с неактивной кнопкой найти очень сложно. Куча навороченных много, а просто проверку полей (пустое - непустое) - пока не могу вообще найти.

Последний раз редактировалось warriorbutch, 15.01.2014 в 20:22.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
при нажатии на картинку(типа кнопки) скрывать и показывать DIV Russianmaniac Элементы интерфейса 4 27.11.2010 23:47
Активация кнопки при вводе верного ответа JukiPuki Общие вопросы Javascript 3 08.02.2010 22:12
Выплывающие списки и обновление текстового поля Gazprom Элементы интерфейса 5 02.08.2009 10:34
Переход между окнами ввода при заполнении. Бушка Общие вопросы Javascript 4 25.03.2009 14:40
Удаление по одному символу из текстового поля.. maxander Общие вопросы Javascript 1 08.12.2008 08:39