在模态框内跟踪 HTML 表单的变化

Question

我的应用中有一个模式对话框，其中包含大约 10 个输入（即文本、日期、数字和选择输入）。我需要知道用户是否更改了任何小部件的值，以便当他们单击取消按钮时，我可以提示他们是否希望在关闭对话窗口之前保存更改。

我可以通过两种方式做到这一点，这可能不是最聪明的方式：

1) 在我的 javaScript 中设置一个全局变量并跟踪“onChange”事件。

2) 比较每个小部件或输入之前和之后的值，以确定它们是否发生了变化。

我想知道是否还有其他我不知道的选项，因为我是 jQuery 和 javaScript 的新手。

如果这是一个重复的问题，我深表歉意，我搜索并发现了另一个类似的问题，但不是我所追求的。 Best way to track onchange as-you-type in input type="text"?

谢谢

Answer 1

使用脏标志：

var dirty = false;
$('#myModalForm input').change(function() {
  dirty = true;
});
$('#myModalForm #cancelButton').click(function() {
  if (dirty) {
    //confirm
  }
  // exit modal
});
$('#myModalForm #save').click(function() {
  // save
  dirty = false;
});