Как отключить кнопку отправки в jQuery, если поля формы не были изменены?

Question

У меня есть HTML-форма, которая содержит текстовые поля, флажки, переключатели и кнопку отправки.

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

1. Исходное значение поля "foo" => кнопка отправки отключена
2. Пользователь меняет значение поля на "bar" => становится активной кнопка отправки
3. Пользователь изменяет значение поля обратно на «foo» => кнопка «Отправить» снова отключается

Как этого добиться с jQuery ? Есть ли какое-либо общее решение или сценарий, который я мог бы использовать с любой формой?

Редактировать: То, что я спрашиваю, нельзя сделать простым отслеживанием грязного состояния.

Answer 1

Использовать отслеживание грязного состояния. Прикрепите логическое значение (например, IsDirty) к каждому элементу управления вводом и переключайте его при каждом изменении значения. При отправке формы проверьте, изменилось ли хотя бы одно или несколько значений, а затем отправьте форму. В противном случае отобразите предупреждение для пользователя.

Другим решением является вызов общей функции при изменении значения элемента управления. В этой функции вы можете установить для глобальной переменной (IsDirty) значение true, если что-то изменилось, а также включить / отключить кнопку отправки.

var isDirty = false;

function SomethingChanged(){
     if( !isDirty ) isDirty = true;
     btnSubmit.disabled = !isDirty;
}

Общая функция для любого элемента управления

Допущения: добавьте начальное значение каждого элемента управления к атрибуту "InitVal"

function SomethingChanged(control){
     if( control.value != control.InitVal )
          control.IsDirty = true;
     else
          control.IsDirty = false;
}

В приведенной выше функции, чтобы сделать ее универсальной, вы можете иметь отдельные функции для каждого типа элемента управления, например TextBoxChanged, DropDownChanged и т. Д. Но иметь следующие два атрибута для каждого элемента управления

1. InitValue - Начальное значение элемента управления
2. IsDirty - логическое значение, указывающее, что значение элемента управления изменилось

Answer 2

Всего два шага:

1. хранить хэш всех начальных значений в переменной javascript
2. onchange каждого ввода пересчитывает этот хэш и проверяет его с сохраненным. если это то же самое, отключите кнопку отправки, если нет, включите ее.

Answer 3

Это кажется лучшим ответом.

1401-Using-JQuery-To-Leverage-The-OnChange-Method-Of-Inputs.htm

Answer 4

Взгляните на плагин проверки .

Answer 5

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

Answer 6

Вместо этого вы можете использовать плагин dirtyField и установить denoteDirtyForm: true. Теперь, если ваша форма имеет класс dirtyForm, значит, у вас есть несохраненные изменения.

Answer 7

Должна быть возможность сохранить весь объект формы (либо как есть, либо путем итерации с помощью .each () и сохранения данных на карте), а затем выполнить то же самое для onSubmit и сравнить оба значения.

Answer 8

Я не проверял что ниже :-) Но это то, что вы имеете в виду?

$(document).ready(function() {
    $("#myform :input").attr("init",$(this).val()).bind("change.dirty", function(evt) {
        if ($(this).val()!=$(this).attr("init")) $(this).addClass("dirty");
        else $(this).removeClass("dirty");
        $('#thebutton').attr("disabled",!$("#myform .dirty").size());
    });
});

* - щука