jQueryでフォームに変更があったかどうかを調べる

● jQuery Dirty

https://www.jqueryscript.net/form/alert-form-changed-dirty.html

こちらを実行して監視を開始します

    $(function() {
        $("#input-form").dirty({
            preventLeaving: true,
            leavingMessage: 'NO SAVE',
            onDirty: function(){
                alert("フォームが変更されています。ページを離れますか?")
            }
        });
    });

他にも便利なメソッドがあります

// detects if a form has been modified
// returns true or false
$("#form").dirty("isDirty");

// detects if a form is Clean
// returns true or false
$("#form").dirty("isClean");

// refreshes events
$("#form").dirty("refreshEvents");

// resets the form
$("#form").dirty("resetForm");

// sets the state to Clean
$("#form").dirty("setAsClean"); 

// shows modified form fields
$("#form").dirty("showDirtyFields");

● jQuery Dirtyと iCheckとの共存

iCheckではチェックボックスやラジオボタンをクリックしたときに ifClicked() イベントが走るのでその中で、onchange() イベントを発火してやればOKです。

<script type="text/javascript">
$(function() {
    // 1. iCheckの初期化
    $('input[type=checkbox],input[type=radio]').iCheck({});

    // 2. iCheckクリック時に onchange() イベント発火する
    $('input[type=checkbox],input[type=radio]').on('ifClicked', function(event) {
        setTimeout(() => {
            $(this).change();
        }, 10);
    });
})
</script>
No.1855
02/18 16:17

edit