Что состоит в том, чтобы обнаружить самый легкий путь, если по крайней мере одно поле было изменено на HTML-форме?

Используя jQuery это очень легко. Необходимо быть в состоянии использовать ту же предпосылку для достижения того же результата в ванильном JavaScript также.

var $inps = $('#myForm').find('input,select,textarea')
  , formAltered = false
;
$inps.change(function() {
    formAltered = true;
    $inps.unbind('change'); // saves this function running every time.
});

единственная проблема с этим состоит в том, если Вы измените значение и затем возвратите его к оригиналу, то оно все еще сообщит о форме, как изменено.

Вот один лайнер, который можно добавить к формам:

$(':input',document.myForm).bind("change", function() { 
  enablePrompt(true); }); // Prevent accidental navigation away

И затем можно сделать enableUnloadPrompt () функцией для целого сайта:

function enablePrompt(enabled) {
  window.onbeforeunload = enabled ? "Your changes are not saved!" : null;
}

И наконец перед представлением формы правильно удостоверьтесь, что:

enablePrompt(false);

Это не проверит, чтобы видеть, отличается ли форма в значениях, только если форма когда-либо изменялась пользователем. Но, это просто и просто в использовании.

Подход

1. сериализирует форму (и все ее значения) прежде, чем показать, что это ( jQuery путь , Прототип путь )
2. сериализирует его снова в "onbeforeunload" обработчик событий

, Если эти два не соответствуют, то они, должно быть, изменили форму, так возвратите строку (например, "Вы не сохранили данные") от Вашего onbeforeunload обработчик.

Этот метод позволяет полям формы развиваться, в то время как "подтверждают, если изменено" логику, остается тем же.

Пример (смешал JavaScript и jQuery)

var form_clean;

// serialize clean form
$(function() { 
    form_clean = $("form").serialize();  
});

// compare clean and dirty form before leaving
window.onbeforeunload = function (e) {
    var form_dirty = $("form").serialize();
    if(form_clean != form_dirty) {
        return 'There is unsaved form data.';
    }
};

Это могло быть обработано со всего одной логической переменной, мы называем ее грязной разрядной обработкой. Если Вы наблюдали, обычно в веб-страницах, как только пользователь выполняет некоторое действие редактирования с любым из полей, форму считают как грязную (отредактированной) (даже если данные остаются неизменными после редактирования). То, когда пользователь пытается перейти далеко от пользователя страницы, запрашивается, если он хочет сохранить изменения.

Согласно общепринятой практике, нет никакой проверки, если после редактирования некоторого поля, если значение на самом деле было изменено или нет. Для, например: Если пользователь редактирует и добавляет 'xyz' к текстовому полю и затем удаляет 'xyz' по существу, данные формы остаются тем же, как это было, прежде, но форму все еще рассматривают как 'грязную' и пользователь, запрошенное предупреждающее сообщение, когда он пытается перейти далеко.

Так, если Вы хотите реализовать это, вещи становятся довольно простыми. Необходимо было бы просто добавить onchange () eventhandlers к средствам управления и установить глобальную логическую переменную что-то как isDirty к истинному в тех eventhandlers.

, Как только пользователь хочет перейти далеко, можно высветиться, сообщение "Там может быть не сохранено изменения на текущей странице. Вы хотите сохранить их?". Пользователь не будет разочарован, даже если он заметит, что его редактирование не изменило исходные данные.

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

Я вполне уверен, это - плохая идея, но я хотел бросить ее там.

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

Там может или могут не быть различные ошибки браузера, связанные со свойствами "значения по умолчанию", таким образом, я не доверял бы этому методу без обширного тестирования. Код ниже является подтверждением концепции и не используется (мной) ни в каком реальном приложении.

function IsDirty(form) {
    for (var i=0; i<form.elements.length; i++) {
        var field = form.elements[i];
        switch (field.type) {
            case "select-multiple":
            case "select-one":
                var options = field.options;
                for (var j=0; j<options.length; j++) {
                    if(options[j].selected != options[j].defaultSelected) return true;
                }
                break;
            case "text":
            case "file":
            case "password":
                if (field.value != field.defaultValue) return true;
                break;
            case "checkbox":
            case "radio":
                if (field.checked != field.defaultChecked) return true;
                break;
        }
    }
    return false;
}