jquery - 仅从已更改的文本输入中收集值

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

您可以使用输入字段的 onChange 事件并为此收集一些隐藏字段或全局数组字段中的信息。

Answer 3

您绑定到每个数据输入的更改事件，并将这些名称-值对存储在全局数组或隐藏的表单字段中。

另一种方法是为每个已编辑的字段添加一个“已更改”类。然后，当他们提交表单时，您可以创建一个仅更改类元素的新表单，也可以从包含所有文本输入的表单中删除其他元素。

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