Javascript.RU

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

Активация кнопки отправления при заполнении текстового поля
Ребята, я новичок в jquery и мне нужна ваша помощь. Задача передо мной стоит такая: есть текстовое поле и кнопка, по умолчанию неактивная, но видимая. Как только пользователь начинает заполнять это поле (т.е. оно становится не пустым), кнопка активируется и при нажатии данные отправляются на сервер. С помощью каких селекторов это можно организовать?
Ответить с цитированием
  #2 (permalink)  
Старый 18.02.2011, 12: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, 13:26
Аватар для Bandicoot
Кандидат Javascript-наук
Отправить личное сообщение для Bandicoot Посмотреть профиль Найти все сообщения от Bandicoot
 
Регистрация: 09.02.2011
Сообщений: 145

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

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

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

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

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

<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>

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

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

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

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

<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>

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

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

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

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

Последний раз редактировалось warriorbutch, 15.01.2014 в 21:22.
Ответить с цитированием
  #9 (permalink)  
Старый 03.12.2020, 13:08
Новичок на форуме
Отправить личное сообщение для volc888 Посмотреть профиль Найти все сообщения от volc888
 
Регистрация: 03.12.2020
Сообщений: 1

Ребята. Помогите мне) код работает но у меня список select .
и не могу переделать под выпадающий список
<tr>
        <td>Отвественное ИП</td><td><input class="form-control mr-sm-2 ml-3" type="search" placeholder="ФИО директора" aria-label="Search" id="tip">
             <select id="" class="form-control mr-sm-2 ml-3" onkeyup="check();">
                          <option>ИП</option>
                          <option>OOO</option></td><td><input class="form-control mr-sm-2 ml-3" type="search" placeholder="Название ИП" aria-label="Search"></td>
    </tr>
    <tr>

         <td>Директор</td><td><input type="text" id="dir" class="form-control mr-sm-2 ml-3" placeholder="Disabled input" disabled="disabled"></td>
Ответить с цитированием
  #10 (permalink)  
Старый 03.12.2020, 15:13
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,431

<select id="inp" class="form-control mr-sm-2 ml-3" oninput="alert(`oniput нужен ${inp.value}`) ">
	   <option value="1">ИП</option>
	   <option value="2">OOO</option
</select>

Ответить с цитированием
Ответ



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

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


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