Используя jQuery, как я могу найти, изменилась ли форма?

Я хочу знать, изменилась ли форма вообще. Форма может содержать любой элемент формы, такой как вход, select, textarea и т.д. В принципе, я хочу, чтобы пользователь отображал несохраненные изменения в форме.

Как это сделать, используя jQuery?

Чтобы уточнить: я хочу получить ЛЮБОЕ изменение формы, а не только вводить элементы, но и ко всем другим элементам формы, textarea, select и т.д.

Ответ 1

Подход, который я обычно беру в таком случае, заключается в том, что я проверяю значение сериализованной формы. Поэтому идея состоит в том, что вы вычисляете начальное состояние формы с помощью метода $.fn.serialize. Затем при необходимости вы просто сравниваете текущее состояние с исходной сериализованной строкой.

Чтобы настроить таргетинг на все элементы ввода (select, textarea, checkbox, input-text и т.д.) в форме, вы можете использовать псевдоселектор :input.

Например:

var $form = $('form'),
    origForm = $form.serialize();

$('form :input').on('change input', function() {
    $('.change-message').toggle($form.serialize() !== origForm);
});

.change-message {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <div class="change-message">You have unsaved changes.</div>
    <div>
        <textarea name="description" cols="30" rows="3"></textarea>
    </div>
    <div>Username: <input type="text" name="username" /></div>
     <div>
        Type: 
        <select name="type">
            <option value="1">Option 1</option>
            <option value="2" selected>Option 2</option>
            <option value="3">Option 3</option>
        </select>
    </div>
    <div>
        Status: <input type="checkbox" name="status" value="1" /> 1
        <input type="checkbox" name="status" value="2" /> 2
    </div>
</form>