Форум

Bandicoot · #1 (**permalink**) 17.02.2011, 22:09

Ребята, я новичок в jquery и мне нужна ваша помощь. Задача передо мной стоит такая: есть текстовое поле и кнопка, по умолчанию неактивная, но видимая. Как только пользователь начинает заполнять это поле (т.е. оно становится не пустым), кнопка активируется и при нажатии данные отправляются на сервер. С помощью каких селекторов это можно организовать?

walik · #2 (**permalink**) 18.02.2011, 12:10

Ну можно к примеру при событии "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>

Bandicoot · #3 (**permalink**) 18.02.2011, 13:26

Спасибо! То что мне нужно!

warriorbutch · #4 (**permalink**) 15.01.2014, 12:25

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

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

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

Vlasenko Fedor · #5 (**permalink**) 15.01.2014, 16:32

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

warriorbutch · #6 (**permalink**) 15.01.2014, 21:52

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

простите...

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

Есть такое решение?

Vlasenko Fedor · #7 (**permalink**) 15.01.2014, 21:56

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

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

warriorbutch · #8 (**permalink**) 15.01.2014, 22:03

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

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

volc888 · #9 (**permalink**) 03.12.2020, 13:08

Ребята. Помогите мне) код работает но у меня список 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>

Vlasenko Fedor · #10 (**permalink**) 03.12.2020, 15:13

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

Форум

Справочник

Discord чат

Курсы javascript