2016-11-29 42 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] .......) –

相关问题