解析輸入字段使用jQuery

Question

我忙着形式複製格式化JSON，當按下提交，我想它解析爲JSON的格式如下：

{ "dependant1": [ 
    { "name": "daniel"}, 
    ],"dependant2": [ 
    { "name": "steve"}, 
    ] 
} 

每增加依賴，在現在，如果我添加更多，然後一個依賴它返回「{} {}」，但如果只有一個依賴它返回「{」名稱「：」史蒂夫「}}。 ：

jQuery：

 //Clone Tracking 
var g_counter = 1; 
var d_counter = 1; 
var dependant = ["dependant"]; 
var group; 
//Clone Tracking 
//General Variables 
var name_input_groups = ["name-group-1"]; 
//General Variables 
//Generate variables 
var name_fields=[0]; 
var name_input = "<input class='name' />"; 
//Generate variables 
jQuery(document).ready(function(e) { 
    jQuery(name_fields).each(function() { 
     jQuery(name_input).appendTo('#name-group-1'); 
    }); 
    //populate jquery generated fields 
    //Cloning Function 
    jQuery('#clone').click(function() { 
     clone_dependant(); 
    }); 

    function clone_dependant() { 
     // Store the value of the previous Id to insert the cloned div.. 
     var oldId = g_counter; 
     g_counter++; 
     // Clone the Dependant Div and set a new id 
     var $clonedDiv = jQuery('#dependant-1').clone(false).attr('id', 'dependant-'+g_counter); 
     var name_newDiv = 'name-group-'+ g_counter; 
     // Find div's inside the cloned object and set a new id's 
     $clonedDiv.find('#name-group-1').attr('id',"name-group-" + g_counter); 
     // You don't need to Loop thru the inputs to set the value 
     $clonedDiv.find('input').val(''); 
     // Insert the cloned object 
     $clonedDiv.insertAfter("#dependant-" + oldId); 
     name_input_groups.push(name_newDiv); 
    }; 
    //Cloning Function 
    function validate_gen() {}; 
//submit function 
var dep_counter = 0 
jQuery('#submit').click(function(){ 
    $('.dependant').each(function(k, v){ 
     dep_counter++; 
     var dependants = {}; 
    dependants['name'] = jQuery("#name-group-" + dep_counter).find('input').val(); 
     var json = JSON.stringify(dependants); 
     console.log(json); 
    }); 
}); 
}); 

和繼承人的HTML：

<div id="dependant-1" class="dependant"> 
    name<div id="name-group-1"></div> 
</div> 
<div id="test"></div> 

<button id="clone">clone</button> 
<button id="submit">submit</button> 

和的jsfiddle鏈接 - http://jsfiddle.net/dawidvdh/TzRu8/2/

感謝。

Answer 1

簡單地用下面的代碼，它perefectly工作：

var result = {}; 
var dependants; 
jQuery('#submit').click(function(){ 
    $('.dependant').each(function(k, v){ 
     dependants = {}; 
     dependants['name'] = $(v).find('.name').val(); 
     dependants['surname'] = $(v).find('.surname').val(); 
     dependants['id'] = idNumber; 
     dependants['age'] = $(v).find('.age').val(); 
     dependants['gender'] = $(v).find('.gender').val(); 
     dependants['cell'] = cell_values; 
     dependants['passport'] = pass_values; 
     dependants['relationship'] = $(v).find('.relationship:checked').val(); 
     result['dependant'+g_counter] = [dependants]; 
    }); 

    var jsonData = JSON.stringify(result); 

    console.log(jsonData); 

    $.ajax({ 
     type: "POST", 
     url: "mail.php", 
     dataType: "json", 
     data: {parameters: jsonData} 
    }); 

}); 

謝謝大家:)

Answer 2

你的json格式不正確。您可以使用http://jsonlint.com/至 驗證您的json格式。

舉例來說，這是一個正確的格式

{ "dependant1": [{ "name": "daniel"}] }, 
{ "dependant2": [{ "name": "steve" }] } 

您將需要重新編寫腳本產生一個有效的JSON格式。按照上面的模式添加更多的依賴者....除非史蒂夫是丹尼爾的次依賴者，那麼結構更接近你開始的東西。

Answer 3

你的代碼有兩個錯誤。

1：

$clonedDiv.find('#name-group-1').attr('id',"#name-group-" + g_counter); 

應與沒有之前的名字組'＃'：

$clonedDiv.find('#name-group-1').attr('id',"name-group-" + g_counter); 

2：

dependants['name'] = jQuery("#name-group-" + g_counter).val(); 

其中 'g_counter' 應該是' dep_counter」。

[更新]

哦，對不起，我忘了第三個錯誤：

dependants['name'] = jQuery("#name-group-" + dep_counter).val(); 

應該是：

dependants['name'] = jQuery("#name-group-" + dep_counter).find('input').val(); 

在修復這些錯誤，你可以用下面的代碼得到你想要的：

var dep_counter = 0 
var result = {}; 
jQuery('#submit').click(function(){ 
    $('.dependant').each(function(k, v){ 
     dep_counter++; 
     var dependants = {}; 
     dependants['name'] = jQuery("#name-group-" + dep_counter).find('input').val(); 
     result['dependant'+dep_counter] = [dependants]; 
    }); 
    console.log(JSON.stringify(result)); 
});