2010-11-01 62 views
1

我有一個html頁面,在ajax調用後顯示大量數據行,在每一行中我都輸入具有不同值的文本,用戶可以編輯此文本輸入,然後按一個按鈕來做一些計算動作。僅從已更改的文本輸入收集值

我該如何收集與JavaScript(jQuery)只有這個值已被更改,並將它們發送到PHP腳本。我搜索一個簡單的方法,而不是保存所有大數值的舊值,然後與新值進行比較,是否有這樣的解決方案?

回答

6

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

+0

非常感謝你 – 2010-11-01 07:42:47

+0

我怎樣才能保存每個輸入的id? – 2010-11-01 07:47:29

+0

@Haim在ajax函數中使用的'data'對象中,可以使用'this.id'來獲取當前元素的'id',就像我上面使用的'this.value'。 – 2010-11-01 07:52:05

1

您可以使用輸入字段的onChange事件併爲此收集某些隱藏字段或全局數組字段中的信息。

1

您綁定到每個數據輸入的更改事件,並將這些名稱 - 值對存儲在全局數組或隱藏表單域中。

另一種方法是將「已更改」類添加到已編輯的每個字段。然後,當他們提交表單時,您可以創建一個僅改變了類的元素的新表單,也可以從包含所有文本輸入的表單中刪除其他元素。

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

我忘了說,這行與文本輸入構建具有Ajax調用 – 2010-11-01 07:39:46

+0

使用'this.value'和'this.name'將節省你在傳遞給事件處理程序的匿名函數中創建一個新的jQuery對象。 – 2010-11-01 07:54:36