web-dev-qa-db-ja.com

フォーム入力が変更されたことをどのように知ることができますか？

<% Ajax.BeginForm() {} %>によって生成されたフォームがあり、多くの入力とtexareaが含まれています。

入力値が変更された場合、それを認識し、入力とフォームを「ダーティ」としてマークする必要があります。ユーザーが保存せずにページを離れようとした場合、変更を破棄することを確認するようにユーザーに依頼します。

これをどのように行うべきかについての提案はありますか？

jqueryasp.net-mvc-2asp.net-ajax
20
tkalve

Htmlコントロールには、元の値を保持するプロパティが含まれています。この値を現在の値と比較して、変更があったかどうかを確認できます。

function getHasChanges() {
    var hasChanges = false;

    $(":input:not(:button):not([type=hidden])").each(function () {
        if ((this.type == "text" || this.type == "textarea" || this.type == "hidden") && this.defaultValue != this.value) {
            hasChanges = true;
            return false;             }
        else {
            if ((this.type == "radio" || this.type == "checkbox") && this.defaultChecked != this.checked) {
                hasChanges = true;
                return false;                 }
            else {
                if ((this.type == "select-one" || this.type == "select-multiple")) {
                    for (var x = 0; x < this.length; x++) {
                        if (this.options[x].selected != this.options[x].defaultSelected) {
                            hasChanges = true;
                            return false;
                        }
                    }
                }
            }
        }
    });

    return hasChanges;
}

function acceptChanges() {
    $(":input:not(:button):not([type=hidden])").each(function () {
        if (this.type == "text" || this.type == "textarea" || this.type == "hidden") {
            this.defaultValue = this.value;
        }
        if (this.type == "radio" || this.type == "checkbox") {
            this.defaultChecked = this.checked;
        }
        if (this.type == "select-one" || this.type == "select-multiple") {
            for (var x = 0; x < this.length; x++) {
                this.options[x].defaultSelected = this.options[x].selected
            }
        }
    });
}
25
Tom Brothers

JQuery Docsから：

//This applies to whole form
$('#formID').change(function() {
  alert('Form changed!');
});

また、このようにして、入力のみを確認し、変更を保存せずに終了しようとした場合にユーザーに通知することができます。

var inputsChanged = false;
$('#formID input').change(function() {
  inputsChanged = true;
});

$(window).unload(function() {
  if (inputsChanged === true) {
    alert('Would you like to save your edits before exiting?'); 
  }    
});

jQuery API .change（）

20
Damiqib

より簡単でより良い方法を考えたので、この古い質問を復活させます。さまざまな入力でイベントをリッスンする代わりに、次のように、初期フォームデータをシリアル化して保存し、後で再度シリアル化して、変更されているかどうかを確認できます。

var originalFormData = $('form#formId').serialize();
function checkFormChanged() {
    if(originalFormData !== $('form#formId').serialize()) {
        //it's dirty!
    }
}

ここでのもう1つの利点は、ユーザーが変更を加えてから元に戻す変更した場合、このチェックでフォームがクリーンであると報告されることです。

16
SwabTheDeck

私はjQueryでこれを行います。これは次のようになります（ドラフトのみ、コードを追加/変更する必要がある場合があります）：

$(document).ready(function() {  
    $('#formId:input').each(function(key) {
        $(this).change(function() {
            $(this).addClass('dirty');
        });
    });
});

次に、POSTする前に、ダーティ入力があるかどうかを確認します。ダーティcssクラスを使用して色を追加することもできます。

編集：タイプミスを修正しました '変更'から '変更'

8
goenning

ダーティフォームを識別するためにjqueryプラグインdirrtyを使用できます。

https://github.com/rubentd/dirrty

On（ "dirty"）イベントで、フォームが変更されたことを識別するために、いくつかのグローバル変数をtrueに設定します。

_window.onbeforeunload_または$(window).unload()イベントを処理し、その変数値に基づいてユーザーから確認を取得します。

このプラグインの利点は、 'on（ "clean"）イベントを使用してフォームが元の値に再度変更された場合に追跡できることです。

1
Santhosh S