jquery - 変更されたテキスト入力からのみ値を収集します

Question

ajax呼び出しが多くのデータ行を表示した後、すべての行に異なる値の入力テキストがあるhtmlページがあり、ユーザーはこのテキスト入力を編集してからボタンを押して計算アクションを実行できます。

変更されたこの値のみをjavascript（jQuery）で収集し、それらをphpスクリプトに送信するにはどうすればよいですか。古い値の大きな配列をすべて保存してから新しい値と比較するのではなく、簡単な方法で検索します。そのような解決策はありますか？

Answer 1

この.data()関数を使用して元の値のコピーを保持し、送信時にそれを値と比較して、変更された値のみが送信されることを確認できます。

var inputs = $('input[type="text"]').each(function() {
    $(this).data('original', this.value);
});

$('#form').submit(function(){
    inputs.each(function() {
        if ($(this).data('original') !== this.value) {
            // Do something for the changed value
        } else {
            // And something else for the rest.
        }
    });
});

こちらのデモをご覧ください：http ：//www.jsfiddle.net/yijiang/twCE9/

Answer 2

入力フィールドのonChangeイベントを使用して、このための非表示フィールドまたはグローバル配列フィールドの情報を収集できます。

Answer 3

データ入力ごとにchangeイベントにバインドし、それらの名前と値のペアをグローバル配列または非表示のフォームフィールドに格納します。

別の方法は、編集された各フィールドに「変更された」クラスを追加することです。次に、フォームを送信するときに、クラスの要素だけを変更して新しいフォームを作成するか、すべてのテキスト入力を含む他の要素をフォームから削除します。

<input type="text" class="data_input" name="name1" value="value1" />
<input type="text" class="data_input" name="name2" value="value2" />
...
<input type="text" class="data_input" name="nameX" value="valueX" />

次に、JSで

$(document).ready(function() {
    $(".data_input").change(function() {
        $(this).addClass('changed');
    });

または、グローバル配列を使用する場合は、次のようにします。

var changedArr = [];
$(document).ready(function() {
    $(".data_input").change(function() {
        changedArr.push({'name': $(this).attr('name'), 'value': $(this).val()});
    });