сабмит - запретить отправку формы jquery




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

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

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

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

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

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

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

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


Используйте грязное отслеживание состояния. Прикрепите логическое значение (например, 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 - логическое значение, указывающее, что значение элемента управления изменилось


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

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

* -pike


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


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





form-submit