2012-04-03 11 views
0

問題:APIのニーズに応じてフォームデータの書式を設定する方法がわかりません。動的に作成されたフィールドセットを使用してデータを書式設定する/反復する

質問:私はあなたの助けを求めています:)

HTML:

<form id="donation"> 
    <fieldset> 
      <ul> 
       <li> 
        <input type="hidden" name="method" value="submitDonations" /> 
        <input type="hidden" name="donor" value="Fred" /> 
        <input type="hidden" name="donor_city" value="Nashville" /> 
        <input type="hidden" name="donor_state" value="TN" /> 
        <select name="donate_country"> 
         <option value="choose_one">Choose One</option> 
         <option value="africa">Africa</option> 
         <option value="usa">USA</option> 
         <option value="china">China</option> 
        </select> 
       </li> 
       <li> 
        <label for="apples">Apples: </label> 
        <input type="number" name="apples" /> 
        <label for="bananas">Bananas: </label> 
        <input type="number" name="bananas" /> 
        <label for="pears">Pears: </label> 
        <input type="number" name="pears" /> 
       </li> 
       <li> 
        <button>Donate</button> 
       </li> 
      </ul> 
    </fieldset> 
</form> 

のJavaScript/jQueryの

$('#donation').delegate('select', 'change', function(event) { 
    var self = $(event.target), 
    insertHere = $(self).parents('fieldset'); 
    $('#donation') 
     .find('fieldset') 
     .first() 
     .clone() 
     .insertAfter($(insertHere)); 
}); 

$('#donation').delegate('button', 'click', function(e) { 
    e.preventDefault(); 
    $('#donation').find('fieldset').each(function() { 
     //serializeArray() or something to go here but i can't figure it out 
    }); 
}); 

私は、最終的な配列は、このように見えるように提出する必要があります/この形式で: method = submitDonations & donor =フレッド& donor_city =ナッシュビル& donor_state = TN &寄付= [{donate_country:africa、apples:500、bananas:300、pear:200}、{donate_country:使用、apples:300、bananas:150、pear:400}、{donate_country:中国、リンゴ:400、バナナ:320、洋梨:450}]

答えて

0

ありがたいことに、最後に....私はそれを理解しました。うまくいけば、これは他の誰かを助けるでしょう:

$('#donation').delegate('button', 'click', function(e) { 
e.preventDefault(); 
var FORMDATA = { 
    method: $('#donation').find('input[name=method]').val(), 
    donor: $('#donation').find('input[name=donor]').val(), 
    donor_city: $('#donation').find('input[name=donor_city]').val(), 
    donor_state: $('#donation').find('input[name=donor_state]').val() 
}; 
FORMDATA.donations = []; 
var fieldsets = $('#donation').find('fieldset'); 
for(var f = 0; f < fieldsets.length - 1; f++) { 
    var fieldset = $(fieldsets[f]); 
    var inputs = fieldset.find(':input'); 
    var data = {}; 
    for(var i = 0; i < inputs.length; i++) { 
     data[$(inputs[i]).attr('name')] = $(inputs[i]).val(); 
    } 
    FORMDATA.donations.push(data); 
} 
$.get('url/', JSON.stringify(FORMDATA), function(data, textStatus, jqXHR) { 
    if (//Errors) { 
     //handle errors 
    } 
    //do stuff with returnObject 
}); 
関連する問題