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

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

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

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

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

Изменить: то, что я прошу, невозможно сделать с помощью простого отслеживания грязного состояния.


forms html jquery form-submit
person Juha Syrjälä    schedule 19.05.2009    source источник

Ответы (8)


arrow_upward
4
arrow_downward

Используйте отслеживание грязного состояния. Прикрепите логическое значение (например, 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 - логическое значение, указывающее, что значение элемента управления изменилось
person Hemanshu Bhojak    schedule 19.05.2009
comment
Это не сработает, если пользователь изменит значение обратно на исходное, в этом подходе все равно будет установлен грязный бит, и в этом случае мне нужно, чтобы кнопка была отключена. - person Juha Syrjälä; 19.05.2009

arrow_upward
2
arrow_downward

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

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

arrow_upward
1
arrow_downward

Взгляните на подключаемый модуль проверки.

person kgiannakakis    schedule 19.05.2009

arrow_upward
1
arrow_downward

Кажется, это лучший ответ.

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

person Community    schedule 28.08.2009

arrow_upward
0
arrow_downward

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

$(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());
    });
});

* -пайк

person commonpike    schedule 21.07.2010

arrow_upward
0
arrow_downward

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

person yglodt    schedule 25.08.2010

arrow_upward
0
arrow_downward

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

person Vipul    schedule 14.12.2012

arrow_upward
0
arrow_downward

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

person Doug Morin    schedule 10.09.2014