18

jqueryを使用して、フォームに変更ハンドラーを追加しました。これは、入力が変更された場合に機能しますが、他のコードが入力を変更した場合ではなく、ユーザーが手動で入力を変更した場合にのみ機能します。

入力がコードによって変更された場合でも、フォームが変更されたかどうかを検出する方法はありますか？

4

6 に答える 6

39

はい、これにはいくつかの混乱があるようです。理想的な世界では、入力が変更されるたびに onchange イベントが発生することを期待しますが、それは起こりません。正当な理由があると確信しています-そうではないかもしれません。

この障害を克服した 1 つの方法は、フォームの状態を表示した直後と送信する直前に変数に取り込み、状態が変化したかどうかを確認し、それに応じて行動することです。

保存しやすい状態は、serialize 関数が返すものです。状態を保存する簡単な場所は、データ機能を使用することです。シリアル化とデータの両方が jquery で利用できます。

もちろん、他の異なる形式の状態 (何らかの形式のハッシュ) またはこの状態のストレージ (標準グローバル変数など) を使用できます。

プロトタイプ コードを次に示します。

フォーム ID が「xform」の場合、フォームが表示されたときに次のコードを呼び出すことができます。

$('#xform').data('serialize',$('#xform').serialize());

そして、確認する必要がある場合、たとえばボタン送信の直前に次を使用できます。

if($('#xform').serialize()!=$('#xform').data('serialize')){
    // Form has changed!!!
}

これらすべてを、必要な場所で呼び出す関数を提供するコピー アンド ペーストの JavaScript スニペットにformHasChanged()まとめることができます (テストされていません)。

$(function() {
    $('#xform').data('serialize',$('#xform').serialize());
});
function formHasChanged(){
    if($('#xform').serialize()!=$('#xform').data('serialize')){
        return(true);
    }
    return(false);
}

しかし、ここでやめます。それ以外の場合は、さらに別の jquery プラグインを作成します。

于 2012-04-25T08:37:40.283 に答える
10

フォームのシリアル化は確かにオプションですが、次の場合は機能しません。

  • どのフィールドが変更されたかを知りたい
  • フィールドのサブセットのみをチェックする必要があります
  • フィールドを動的に追加または削除します。

幸いなことに、すべてのフォーム要素には、そのオブジェクトに関連付けられたデフォルト値があります。

  • 入力、テキストエリア: defaultValue
  • チェックボックス、ラジオ: defaultChecked
  • 選択: defaultSelected

例：入力またはテキストエリアが変更されたかどうかを確認するには：

var changed = false;
$(":text,textarea").each(function(){
    changed = this.value != this.defaultValue;
    return !changed; // return if at least one control has changed value
});
于 2012-04-25T10:40:47.463 に答える
1

通常の方法ではありません。

入力で変更してから、変更イベントをトリガーできます。

$('#inputId').val('foo').trigger('change');

またはこれで：

$('#inputId').val('foo').change();
于 2012-04-25T08:04:26.933 に答える
0

これが私がやったことです（私はzafの答えを使って私の解決策を見つけました）

$("form").change(function() {
    $(this).data("changed","true");
});

$("input[type='submit']").click(function() {
    if($("form").data("changed") == "true") {
        var discard = confirm("Some unsaved changes. Discard them ?");
        if(!discard) return false;
    }
});
于 2014-10-23T18:51:40.703 に答える
-1

Tryonchange属性W3cによれば、要素の内容、選択、またはチェック状態が変更されたときはいつでもトリガーする必要があります。

于 2012-04-25T08:06:45.123 に答える