使用jQuery，我该如何查找表单是否已更改？

Question

我想知道一个表单是否有任何更改。该表单可以包含任何表单元素,例如input, select, textarea等。基本上，我想要一种方式向用户显示他们对表单所做的未保存更改。

如何使用jQuery实现这个功能？ 澄清一下：我想捕获表单的所有更改，不仅仅是对输入元素的更改，还包括所有其他表单元素，例如textarea，select等。

- Weblurk

---

你想要在什么时候展示/检查它？ - dfsq

@dfsq，如果表单被修改，并且用户点击“关闭”选项卡或转到其他页面，则应提醒用户保存所做的更改。 - Pratik Joshi

请参考以下帖子： https://dev59.com/pHA75IYBdhLWcg3w790Y - user3275109

请参考以下帖子： https://dev59.com/pHA75IYBdhLWcg3w790Y - user3275109

请停止垃圾信息。 - Weblurk

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>

- dfsq

---

很好的回答。不过，为什么不进行序列化就无法实现呢？我的意思是，有没有一种不需要序列化的方法来实现这个功能？ - Weblurk

你需要一种比较所有表单元素值的方法。我发现序列化是非常方便的方法。只需要一行代码就能完成。这个字符串只依赖于输入的值，正是我们所需要的。当用户撤销更改时，它也能正常工作。序列化字符串还可以恢复到原始值。 - dfsq

非常好用。谢谢。 - kwoxer

这是一个很棒的解决方案！比这里更好的解决方案：https://dev59.com/pHA75IYBdhLWcg3w790Y，因为像那样的解决方案是单向的，一旦输入改变，表单将始终被标记为已更改，而这个解决方案是双向的。如果用户输入然后删除他输入的内容，表单不会被标记为已更改，因为序列化匹配。 :) 是吧？ - Taufik Nur Rahmanda

这个很好用！我遇到了一个问题，我有一个工具生成了一个随机密码并将其放入密码字段中，但它没有被识别为更改...所以在更新值后，我必须在这些密码字段上调用.change()（或者你可以调用.trigger('change')），然后它就很好用了！ - Gary Reckard

伟大的简单解决方案。顶部答案！ - japes Sophey