jQuery: Включение/выключение кнопки отправки формы
У меня есть следующий HTML-код:
<input type="text" name="textField" />
<input type="submit" value="send" />
Я хочу реализовать следующее:
- Если поле ввода пустое, кнопка отправки должна быть отключена (атрибут disabled="disabled").
- Как только в поле ввода появляется текст, атрибут disabled должен удаляться.
- Если поле ввода снова становится пустым (текст удаляется), кнопка отправки должна снова быть отключена.
Я попробовал реализовать это так:
$(document).ready(function(){
$('input[type="submit"]').attr('disabled', 'disabled');
$('input[type="text"]').change(function(){
if($(this).val() !== ''){
$('input[type="submit"]').removeAttr('disabled');
}
});
});
Однако это не работает. Есть идеи, как это исправить?
5 ответ(ов)
Проблема в том, что событие change
срабатывает только тогда, когда фокус покидает поле ввода (например, когда пользователь кликает за пределами поля или переключается на другое поле с помощью клавиши Tab). Попробуйте использовать событие keyup
вместо этого:
$(document).ready(function() {
$(':input[type="submit"]').prop('disabled', true);
$('input[type="text"]').keyup(function() {
if ($(this).val() != '') {
$(':input[type="submit"]').prop('disabled', false);
}
});
});
Этот код будет активировать кнопку отправки, как только пользователь начнет вводить текст в поле, вместо того чтобы ждать, пока фокус уйдёт.
Ваш код содержит несколько ошибок, которые могут привести к неправильной работе функции check_submit()
. Давайте разберем его и исправим.
Использование контекста
this
: В функцииcheck_submit()
контекстthis
не будет указывать на элемент, который ее вызывает, поэтому вам нужно передать контекст явно.Отсутствие события при вызове
check_submit()
вeach()
: При первом вызовеcheck_submit()
(вeach()
) вы не передаете контекст, из-за чего не будет работать должным образом.
Вот как можно переписать код с исправлениями:
$(function() {
$(":text").on('keypress', check_submit).each(function() {
check_submit.call(this); // Передаем контекст явно
});
});
function check_submit() {
if ($(this).val().length == 0) {
$(":submit").attr("disabled", true);
} else {
$(":submit").removeAttr("disabled");
}
}
Теперь функция check_submit()
будет правильно получать контекст элемента, который вызвал ее. Также стоит отметить, что вместо keypress
можно использовать событие input
, чтобы следить за изменениями в текстовом поле более эффективно. Вот пример:
$(function() {
$(":text").on('input', check_submit).each(function() {
check_submit.call(this);
});
});
Это обеспечит более актуальную проверку состояния полей, так как событие input
срабатывает при любом изменении ввода текста.
Чтобы удалить атрибут disabled, используйте:
$("#elementID").removeAttr('disabled');
А чтобы добавить атрибут disabled, используйте:
$("#elementID").prop("disabled", true);
Удачи! 😃
Если вы не хотите использовать jQuery для каждой мелочи, вы можете легко отключить кнопку с помощью чистого JavaScript. Например, вот как это можно сделать:
document.getElementById("submitButtonId").disabled = true;
Этот код находит элемент с указанным идентификатором (submitButtonId
) и устанавливает его свойство disabled
в true
, тем самым отключая кнопку.
Проблема, которую вы описали, действительно может возникнуть, когда пользователь вводит текст и затем удаляет его. Ваш код не отключает кнопку, если поле ввода становится пустым, и это может привести к нежелательным последствиям. Я переписал код, чтобы исправить эту проблему. Вот обновленная версия:
$('input[type="submit"]').attr('disabled', 'disabled');
$('input[type="text"]').on('input', function() {
if ($(this).val() === "") {
$('input[type="submit"]').attr('disabled', 'disabled');
} else {
$('input[type="submit"]').removeAttr('disabled');
}
});
Изменения заключаются в том, что использовал событие input
, которое срабатывает всякий раз, когда содержимое поля ввода меняется, включая его чистку. Таким образом, кнопка будет корректно отключена, когда текстовое поле пустое.
Как узнать, какая радиокнопка выбрана с помощью jQuery?
Как проверить, отмечен ли чекбокс в jQuery?
Как переместить элемент в другой элемент?
Эквивалент jQuery $.ready() на чистом JavaScript - как вызвать функцию, когда страница/DOM готовы (дубликат)
Потеряно HTML-кодирование при чтении атрибута из поля ввода