2016-11-29 73 views
-3

我想創建一個JSON,只提交表單之前更改的那些輸入字段。在表單提交時僅創建帶有更改的輸入字段的JSON

如何以JSON的形式保存每個更改的值?

$(document).ready(function() { 

    $('#save').click(saveChangedValues); 

} 



function saveChangedValues(e) { 

    e.preventDefault(); 

    var fields = $("#frmStudInfo :input").serializeArray(); 

    trackFormDataChanges(fields); 


    //make a ajax call with json only with the changed fields 

    $.ajax{(
    )} 

} 

var finalJSON = {}; 

function trackFormDataChanges(fields){ 

    $.each(fields, function(i, field) { 
     //create final json 
    }); 
} 
<form id="frmStudInfo"> 

    Name <input type="text" id="name" name="name" > 
    Date <input type="date" id="bdate" name="bdate"> 
    ID <input type="number" id="stdID" name="stdID"> 
    <input type="submit" id="save" value="Save" /> 

<form> 
+2

關於更改,標記字段髒。循環髒字段,創建json,提交。 –

+0

你的意思是一個對象。 JSON是一種字符串格式,除非你想開始操縱字符串來保存數據,這是你應該擔心的最後一件事。此外,只需使用[這個問題](http://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery?rq=1)的答案,然後你只需要隨時跟蹤更改。 –

回答

0

你可以做這樣的事情:

var prevFields; 
 
$("#save").click(function(e){ 
 
    e.preventDefault(); 
 
    var fields = $("#frmStudInfo :input").serializeArray(); 
 
    var changedInputs; 
 
    if(prevFields){ 
 
    changedInputs = fields.filter(function(v){ 
 
     prevValue = prevFields.find(val => val.name === v.name); 
 
     return !prevValue || v.value !== prevValue.value; 
 
    }); 
 
    }else{ 
 
    changedInputs = fields; 
 
    } 
 
    console.log("changed inputs", changedInputs); 
 
    prevFields = fields; 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="frmStudInfo"> 
 
Name <input type="text" id="name" name="name" > 
 
Date <input type="date" id="bdate" name="bdate"> 
 
ID <input type="number" id="stdID" name="stdID"> 
 
<input id="save" type="submit" id="save" value="Save" /> 
 
</form>

的想法是存儲在每個所有輸入的值保存和使用它們下一個保存以查看哪些已經改變。

+0

謝謝Titus,這有幫助。 –

+0

我的場景有兩個不同的json。數據庫中的舊JSON和表單提交中的新JSON。我需要比較這兩個並只獲得編輯的字段。這兩個JSON都有不同的格式。 ** OldJSON ** - >({「name」:「USCIS」,「date」:06/12/2016 .......})** fields(avove示例中的變量)** - > ([object object],[object Object] .......) –

相關問題