Узнайте, изменилась ли форма html

Ответ 1

Да, кажется, есть какая-то путаница в этом. В идеальном мире вы ожидаете, что событие onchange произойдет всякий раз, когда меняются входы, но это не то, что происходит. Я уверен по уважительным причинам - возможно, нет.

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

Легкое состояние для хранения - это то, что возвращает функция serialize. Удобное место для хранения состояния - это использование функций данных. Оба serialize и data доступны с помощью jquery.

Конечно, вы можете использовать другие различные формы состояния (некоторая форма хэша) или хранилище для этого состояния (например, стандартная глобальная переменная).

Вот код прототипа:

Если ваш идентификатор формы является "xform", вы можете вызвать следующий код, когда форма отобразится:

$('#xform').data('serialize',$('#xform').serialize());

И затем, когда вам нужно проверить, например, перед подачей кнопки, вы можете использовать:

if($('#xform').serialize()!=$('#xform').data('serialize')){
    // Form has changed!!!
}

Вы можете обернуть все это в копию и вставить фрагмент javascript, который даст вам функцию formHasChanged() для вызова, где вам это нужно (NOT TESTED):

$(function() {
    $('#xform').data('serialize',$('#xform').serialize());
});
function formHasChanged(){
    if($('#xform').serialize()!=$('#xform').data('serialize')){
        return(true);
    }
    return(false);
}

Но я остановлюсь здесь, иначе я создам еще один плагин jquery.

Ответ 2

Сериализация формы, безусловно, является опцией, но она не будет работать, если:

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

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

• input, textarea: defaultValue
• checkbox, radio: defaultChecked
• выберите: defaultSelected

для ex: to ckeck, если изменилось входное или текстовое поле:

var changed = false;
$(":text,textarea").each(function(){
    changed = this.value != this.defaultValue;
    return !changed; // return if at least one control has changed value
});

Ответ 3

Не в обычном режиме.

Вы можете изменить с помощью ввода и затем запустить событие изменения.

$('#inputId').val('foo').trigger('change');

или с этим:

$('#inputId').val('foo').change();

Ответ 4

Вот что я сделал (я нашел свое решение, используя ответ zaf)

$("form").change(function() {
    $(this).data("changed","true");
});

$("input[type='submit']").click(function() {
    if($("form").data("changed") == "true") {
        var discard = confirm("Some unsaved changes. Discard them ?");
        if(!discard) return false;
    }
});

Ответ 5

Попробуйте атрибут onchange Согласно W3c, он должен запускаться в любое время, когда содержимое элемента, выбранного или проверенного состояния изменилось.