2012-04-03 4 views
0

Problem: Ich weiß nicht, wie die Formulardaten entsprechend den Anforderungen der API formatiert werden.Formatieren von Formulardaten/Iterieren durch dynamisch erstellte Feldgruppen

Frage: Ich bin für Ihre Hilfe zu bitten :)

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 
    }); 
}); 

Ich brauche das letzte Array wie folgt aussehen eingereicht werden/in diesem Format sein: method = submitDonations & Spender = Fred & donor_city = Nashville & donor_state = TN & Spenden = [{donate_country: Afrika, Äpfel: 500, Bananen: 300, Birnen: 200}, {donate_country: Verwendung, Äpfel: 300, Bananen: 150, Birnen: 400}, {donate_country: China, Äpfel : 400, Bananen: 320, Birnen: 450}]

Antwort

0

Zum Glück und endlich .... Ich habe es herausgefunden. Hoffentlich hilft das jemand anderem:

$('#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 
}); 
Verwandte Themen