собирать значения только из ввода текста, которые были изменены

Question

У меня есть html-страница, которая после вызова ajax показывает много строк данных, в каждой строке у меня есть вводимый текст с различным значением, пользователь может редактировать этот текстовый ввод и затем нажимать кнопку, чтобы выполнить какое-либо действие вычисления.

Как я могу собрать с помощью 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

Вы связываетесь с событием изменения для каждого ввода данных и сохраняете эти пары имя-значение в глобальном массиве или в скрытых полях формы.

Альтернативой может быть добавление «измененного» класса к каждому редактируемому полю.Затем, когда они отправляют форму, вы можете либо создать новую форму только с измененными элементами класса, либо удалить другие элементы из вашей формы, содержащие все текстовые входы.

<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()});
    });

Answer 3

Вы можете использовать событие onChange поля ввода и собрать для этого информацию в каком-то скрытом поле или поле глобального массива.