javascript - jquery を使用して、パネル内のページの変更が保存されていないことをユーザーに警告する

Question

ここに状況があります。ユーザーがページに未保存の変更を残した場合、ユーザーを停止する必要があります。

現在のページから別のページに移動するための情報をインターネット経由で取得しました

var warnMessage= "You have unsaved changes";
$('input:not(:button,:submit),textarea,select').change(function () {
                window.onbeforeunload = function () {
                    if (warnMessage != null) return warnMessage;
                };
            });

            $('input:submit').click(function(e) {
                warnMessage = null;
            });

これは、タブを閉じているとき、または URL が変更されているときに正常に機能します。

私のページには 3 つの異なるパネルのようなパネルがあり、それぞれに送信、キャンセル、リセットがあります。ここで、パネルが開いたときにユーザーに警告する必要があります。最後のパネルに変更が保存されていない場合、ユーザーに警告する必要があります

パネルに保存されていない変更がある場合は、送信/リセット/キャンセルボタンをクリックしてから、ユーザーが確認する必要があります。

これは可能ですか？