Каков наилучший способ отслеживать изменения в форме с помощью JavaScript?

Question

Я бы хотел отслеживать изменения во входных данных в форме через JavaScript. Мое намерение (но не ограничено)

• включить кнопку «Сохранить» только тогда, когда что-то изменилось
• предупреждение, если пользователь хочет закрыть страницу и что-то не сохраняется

Идеи

Answer 1

У меня была такая же проблема, и я думал о едином решении. Приведенный ниже код не является идеальным, это из начальных исследований. Ниже приведены шаги, которые я использовал:

1) Переместить следующий JS в другой файл (скажем, changeFramework.js)

2) Включите его в свой проект, импортировав его

3) На вашей html-странице, какой бы элемент управления не нуждался в мониторинге, добавьте класс "monitorChange"

4) Глобальная переменная hasChanged сообщит, есть ли какие-либо изменения на странице, над которой вы работаете.

<script type="text/javascript" id="MonitorChangeFramework">
// MONITOR CHANGE FRAMEWORK
// ALL ELEMENTS WITH CLASS ".monitorChange" WILL BE REGISTERED FOR CHANGE
// ON CHANGE IT WILL RAISE A FLAG
var hasChanged;

function MonitorChange() {
    hasChanged = false;
    $(".monitorChange").change(function () {
        hasChanged = true;
    });
}

Ниже приведены элементы управления, в которых я использовал эту платформу:

<textarea class="monitorChange" rows="5" cols="10" id="testArea"></textarea></br>
        <div id="divDrinks">
            <input type="checkbox" class="chb monitorChange" value="Tea" />Tea </br>
            <input type="checkbox" class="chb monitorChange" value="Milk" checked='checked' />Milk</br>
            <input type="checkbox" class="chb monitorChange" value="Coffee" />Coffee </br>
        </div>
        <select id="comboCar" class="monitorChange">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </select>
        <button id="testButton">
            test</button><a onclick="NavigateTo()">next >>> </a>

Я считаю, что в этой структуре может быть огромное улучшение. Комментарии / изменения / отзывы приветствуются. :)

Answer 2

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

Answer 3

Вы также можете проверить этот плагин jQuery, который я создал на jQuery отслеживать изменения в плагине форм

См. Демо здесь и загрузите JS здесь

Answer 4

Вот полная реализация предложения Дилана Битти :

Клиент / JS Framework для защиты "несохраненных данных"?

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

Answer 5

Присоедините обработчик события к каждому событию onchange ввода / выбора / текстовой области формы. Установка переменной, чтобы сказать вам, если вы должны включить кнопку «Сохранить». Создайте обработчик onunload, который также проверяет наличие грязной формы и, когда форма отправляется, сбрасывает переменную:

window.onunload = checkUnsavedPage;
var isDirty = false;
var formElements = //Get a reference to all form elements
for(var i = 0; len = formElements.length; i++) {
    //Add onchange event to each element to call formChanged()
}

function formChanged(event) {
    isDirty = false;
    document.getElementById("savebtn").disabled = "";
}

function checkUnsavedPage() {
    if (isDirty) {
        var isSure = confirm("you sure?");  
        if (!isSure) {
            event.preventDefault();
        }
    }
}