代码之家 › 专栏 › 技术社区 › Haim Evgi

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

textinput forms jquery

1

Haim Evgi · 技术社区 · 15 年前

我有一个html页面,在ajax调用后显示了很多数据行,在每一行我都输入了不同值的文本,用户可以编辑这个文本输入,然后按一个按钮来做一些计算操作。

如何使用javascript(jQuery)只收集已更改的值,并将它们发送到php脚本。我寻找一个简单的方法,不是保存所有大数组的旧值然后与新值比较,有这样的解决方案吗?

3 回复 | 直到 11 年前

1

6

Yi Jiang G-Man 15 年前

你可以使用 .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/

2

1

Ankit Jaiswal 15 年前

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

3

1

David 15 年前

另一种方法是在每个编辑过的字段中添加一个“changed”类。然后,当他们提交表单时,您可以创建一个新表单,只更改类的那些元素,或者从包含所有文本输入的表单中删除其他元素。

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