Активация кнопки отправления при заполнении текстового поля
Ребята, я новичок в jquery и мне нужна ваша помощь. Задача передо мной стоит такая: есть текстовое поле и кнопка, по умолчанию неактивная, но видимая. Как только пользователь начинает заполнять это поле (т.е. оно становится не пустым), кнопка активируется и при нажатии данные отправляются на сервер. С помощью каких селекторов это можно организовать?
|
Ну можно к примеру при событии "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>
|
Спасибо! То что мне нужно!
|
Как я давно искал ответ на этот вопрос. Спасибо огромное :thanks:
Но есть загвоздка. Мне нужно чтобы в форме из нескольких полей, кнопка активировалась при заполнении всех полей. А у меня этот скриптик работает только если в форме одно поле <input>, если же их больше, то кнопка активируется при заполнении только первого поля, а не всех. Как решить эту проблему? |
<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>
|
Круто, всё работает! Но опять мне всё не так как надо :blink: простите...
Этот код работает только на определённое количество полей input или только 3 или только 6. Если в коде указанно 3 поля, а в моей форме поля 2 - то ничего работать не будет. Дело в том, что на моём сайте много форм и они все с разным количеством полей input Есть такое решение? |
<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>
для проверки форм и их значений используются скрипты валиидации. По гуглите их много и с разными возможностями. Текст, маил, телефон, цифры и т. д. |
Спасибо! Мне кто-то советовал уже ))
И спасибо Вам огромное! Правда валидатор с неактивной кнопкой найти очень сложно. Куча навороченных много, а просто проверку полей (пустое - непустое) - пока не могу вообще найти. |
Ребята. Помогите мне) код работает но у меня список 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>
|
<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>
:) |
| Часовой пояс GMT +3, время: 04:34. |