如何序列化多個表單並使用Javascript訪問提交的數據？

Question

我想做一個通用的表單驗證腳本，我將比較表單的現有數據與提交的數據。如果提交的數據是不是與頁面加載時存在的不同，驗證將失敗。

問題是如果一個人有多個表單，並且想要驗證現有數據只是一個表單。這裏有一個的jsfiddle這似乎是相當接近的工作，但仍不是：http://jsfiddle.net/aMUNh/33/

我覺得這個的jsfiddle問題是$.each(function)和設置existingData JSON對象。

HTML：

<form id="form1"> 
<input name='form1name1' value='form1value1'> 
<input name='form1name2' value='form1value2'> 
<input id="1" type="submit" value='submit'> 
</form> 

<form id="form2"> 
<input name='form2name1' value='form2value1'> 
<input name='form2name2' value='form2value2'> 
<input id="2" type="submit" value='submit'> 
</form> 

JS：

var existingData={}; //declaring the object to be cached 
$("form").each(function(index){ 
    existingData.id+=this.id; 
    existingData.id.data+=$(this).serialize(); 
}); 
var id='form1'; 
document.write('existingData:'+existingData.id.data); 

$('input [type=submit]').click(function(){ 
    var id='form'+this.id; 
    var submittedData=$(this.form).serialize(); 
     if(submittedData==existingData.id.data){ 
     console.log('nothing changed'); 
     } 
     else console.log('this form changed');  
});​ 

Answer 1

問題是與您的數據引用的格式;只需使用表單的id即可。你需要這樣的東西：

var existingData = {}; //cached data 
$('form').each(function(index){ 
    existingData[this.id] = $(this).serialize(); 
}); 

$('form').submit(function(e){ 
    e.preventDefault(); // don't really submit for testing 
    var form = this; 
    var submittedData = $(form).serialize(); 
    var originalData = existingData[form.id]; 
    if (submittedData == originalData) 
     console.log('nothing changed'); 
    else 
     console.log('this form changed');  
});​