jQueryは複数のフォームをシリアル化してJSONとして送信します

Question

フォームには、各フォームがデータベースに個々のアイテムを追加する複数のフォームがあります。すべての商品データを送信する[すべて追加]ボタンもあります。 「

products = { 
    "ProductA": { 
     "option": ["Option 1"] // only 1 checkbox is checked 
    }, 
    "ProductB": { 
     "optionAll": "Option All", 
     "option": ["Option 1", "Option 2"] // both checkboxes are checked 
    } 
} 

私はシリアル化されたデータをマッピングすることで遊んでてきたが、couldn：私は次のようなJSON形式にシリアライズされたフォームデータをポストしようとしている

<button type="submit">All all products</a> 

<form> 
<input type="hidden" name="Product" value="ProductA" /> 
<input type="checkbox" name="optionAll" value="Option All" /> Option All 
<input type="checkbox" name="option" value="Option 1" checked="checked" /> Option 1 
<input type="checkbox" name="option" value="Option 2" /> Option 2 
<button type="submit">Add this product"</button> 
</form> 

<form> 
<input type="hidden" name="Product" value="ProductB" /> 
<input type="checkbox" name="optionAll" value="Option All" /> Option All 
<input type="checkbox" name="option" value="Option 1" checked="checked" /> Option 1 
<input type="checkbox" name="option" value="Option 2" checked="checked" /> Option 2 
<button type="submit">Add this product"</button> 
</form> 

： 以下の基本的なHTMLを参照してください。上記のようなJSON形式に変換します。

data = $.map($('form').serializeArray(), function(el, i){ 
    var json = {}; 
    ??? 
    return json; 
}); 
console.log(data) 

あなたのお手伝いをよろしくお願いします。

Answer 1

var result = {}; // object to hold final result 

$('button[type="submit"]').on('click', function() { 

    $('form').each(function() { // loop start for each form 

     var sr = $(this).serializeArray(), 
      options = []; 

     result[sr[0].value] = {}; // insert Product value and initiate it as object 

     $.each(sr, function() { // loop start for each checkbox 

     if(this.name == 'option') { 

      options.push(this.value); 

     } 

     }); 

     // if all checkbox are checked then insert the property optionAll 

     if(options.length == $('input[type="checkbox"][name="option"]',this).length) { 

     result[sr[0].value].optionAll = 'Option All'; 

     } 

     result[sr[0].value].option = options; 

    }); 

    console.log(result); 
}); 

Answer 2

単にだからあなたの仕事は、オブジェクトにするために主にある

JSON.stringify(myobject) 

を使用して、JSON文字列としてjavascriptオブジェクトをシリアル化するために：

var products = { 
}; 

products['ProductA'] = $('input[name="Products"]').find(':checked').val(); 

などを...

しかし、あなたは本当にあなたのHTMLを少し変更する必要があります：あなたは本当に同じ名前の入力を持つことを避ける必要があります。少なくとも彼らにはIDを与えてください。