9

jQuery: Включение/выключение кнопки отправки формы

12

У меня есть следующий 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 ответ(ов)

14

Проблема в том, что событие 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);
        }
    });
});

Этот код будет активировать кнопку отправки, как только пользователь начнет вводить текст в поле, вместо того чтобы ждать, пока фокус уйдёт.

1

Ваш код содержит несколько ошибок, которые могут привести к неправильной работе функции check_submit(). Давайте разберем его и исправим.

  1. Использование контекста this: В функции check_submit() контекст this не будет указывать на элемент, который ее вызывает, поэтому вам нужно передать контекст явно.

  2. Отсутствие события при вызове 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 срабатывает при любом изменении ввода текста.

0

Чтобы удалить атрибут disabled, используйте:

$("#elementID").removeAttr('disabled');

А чтобы добавить атрибут disabled, используйте:

$("#elementID").prop("disabled", true);

Удачи! 😃

0

Если вы не хотите использовать jQuery для каждой мелочи, вы можете легко отключить кнопку с помощью чистого JavaScript. Например, вот как это можно сделать:

document.getElementById("submitButtonId").disabled = true;

Этот код находит элемент с указанным идентификатором (submitButtonId) и устанавливает его свойство disabled в true, тем самым отключая кнопку.

0

Проблема, которую вы описали, действительно может возникнуть, когда пользователь вводит текст и затем удаляет его. Ваш код не отключает кнопку, если поле ввода становится пустым, и это может привести к нежелательным последствиям. Я переписал код, чтобы исправить эту проблему. Вот обновленная версия:

$('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, которое срабатывает всякий раз, когда содержимое поля ввода меняется, включая его чистку. Таким образом, кнопка будет корректно отключена, когда текстовое поле пустое.

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь