[解決済み] html フォームが編集されたかどうかを検出する一般的な方法

質問

タブ付きのHTMLフォームがあります。あるタブから別のタブに移動すると、データに変更がない場合でも、現在のタブのデータが (DB 上で) 永続化されます。

私は、フォームが編集された場合にのみ、永続化の呼び出しを行いたいと考えています。フォームにはどのような種類のコントロールでも含めることができます。フォームを汚すことは、テキストを入力することである必要はなく、カレンダー コントロールで日付を選択することも適格であるでしょう。

これを達成する1つの方法は、デフォルトで読み取り専用モードでフォームを表示し、「編集」ボタンを持ち、ユーザーが編集ボタンをクリックすると、DBへの呼び出しが行われます (もう一度、データが変更されたかどうかに関係なく。)。これは、現在存在するものよりも良い改善です）。

私は、コントロールの値が変更されたかどうかをチェックする一般的なjavascript関数を記述する方法を知りたいのですが？

どのように解決するのですか？

純粋なjavascriptでは、これは簡単な作業ではありませんが、jQueryでは非常に簡単に行うことができます。

$("#myform :input").change(function() {
   $("#myform").data("changed",true);
});

そして保存する前に、変更されたかどうかを確認することができます。

if ($("#myform").data("changed")) {
   // submit the form
}

上記の例では、フォームは "myform" と等しい ID を持っています。

もし多くのフォームでこれが必要なら、簡単にプラグインにすることができます。

$.fn.extend({
 trackChanges: function() {
   $(":input",this).change(function() {
      $(this.form).data("changed", true);
   });
 }
 ,
 isChanged: function() { 
   return this.data("changed"); 
 }
});

とすればいいだけです。

$("#myform").trackChanges();

で、フォームが変更されたかどうかをチェックします。

if ($("#myform").isChanged()) {
   // ...
}