使用jQuery，我如何发现表单是否已更改？

Question

我想知道表单是否发生了根本的变化。表单可以包含任何表单元素，如输入、选择、文本区域等。基本上，我想要一种方式来向用户显示他们对表单所做的未保存更改。

如何使用jQuery完成此操作？

select澄清:我希望捕获表单的任何更改，不仅是对输入元素的更改，也是对所有其他表单元素的更改，如文本区域、等。

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>

​