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

Question

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

Как это сделать с помощью jQuery?

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

Answer 1

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

Чтобы настроить таргетинг на все элементы ввода (выберите, текстовое поле, флажок, ввод-текст и т. Д.) В форме, вы можете использовать псевдоселектор :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>