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

Posted 2023-04-18

【中文标题】仅从已更改的文本输入中收集值

【英文标题】：collect value only from the text input that have been changed

【发布时间】：2011-05-03 07:17:06

【问题描述】：

我有一个 html 页面，在 ajax 调用后显示大量数据行，在每一行中我输入了具有不同值的文本，用户可以编辑此文本输入，然后按下按钮执行一些计算操作。

如何使用 javascript(jQuery) 仅收集已更改的这些值，并将它们发送到 php 脚本。我搜索了一个简单的方法，不保存所有旧值的大数组然后与新值进行比较，有没有这样的解决方案？

【参考方案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/

【讨论】：

如何保存每个输入的 id ？

@Haim 在你在ajax函数中使用的data对象中，你可以使用this.id获取当前元素的id，就像我上面使用的this.value一样。跨度>

我的意思是我想为每个元素保存 2 个值，一个是 id，另一个是一个值，在数据函数中保存 2 对（数组）的语法是什么

@Haim 你做了类似$.post(url, value: this.value, id: this.id, success) 的事情。有关更多详细信息，请参阅这些函数的 jQuery 文档

谢谢，它的工作我使用 $(this).data('original', this.value, 'id', this.id);也保存 id

【参考方案2】：

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

【参考方案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());
    );

【讨论】：

我忘了说这个带有文本输入的行是用 ajax 调用构建的

使用 this.value 和 this.name 可以避免在传递给事件处理程序的匿名函数中创建新的 jQuery 对象。