从动态HTML数组创建对象

Question

I want to get an Object in javascript with values from my dynamically generated array in correct order so then later on I will be able to jsonencode that object and save it into my Database. (Maybe there is a different easier way of doing it)

Here is the form

 <form name="second_form" id="second_form" action="#" method="POST">            
    <a href="#" id="AddChampion" onclick="return false;">Add Champion</a>
        <div id="ChampionInput">
        </div>
        <input type="submit" name="submit">
    </form>

Here are functions that I use to create this array:

    $('a#AddChampion').on('click',function(){
        $('div#ChampionInput').append(
        '<div class="Champion">\
             <input type="text" class="ChampionInput">\
             <a href="#" class="AddGeneralChange">Add General Change</a>\
             <div class="GeneralChanges">\
             </div>\
         <div>');
     });

$('div#ChampionInput').on('click','a.AddGeneralChange', function(){
    $(this).siblings('.GeneralChanges').append(
       '<div class="GeneralChange">\
        <textarea type="text" size="20" rows="3" cols="50"  class="GeneralChangeDescription"></textarea>\
        </div>');
});

And below is what I've tried with no result. I was trying to loop through values of my array and then put it into an object I get the whole div instead of the actual value.

$( "#second_form" ).submit( function(event) {
    $( "#ChampionInput.ChampionInput :input" ).each( function( index, value ) {
        var _value = value;
        var _index = index;
        alert(value);
        $(this).children( ".GeneralChangeDescription").each( function( index, value ) {

        });
    });
});

Here is a picture of how it could look like after adding some fields http://imgur.com/QXhWSHA

And here is working jSfiddle: http://jsfiddle.net/ss84agxv/

Answer 1

Try this code, I hope that I understood your question correctly.

$("#second_form").submit(function(event) {
    //don't do the default action on submit
    event.preventDefault();     
    //Your object as array for the champions
    var object = [];        
    //Loop through each .Champion-div
    $('.Champion').each(function() {

        //Create a new object for this champion with the value from the input field and an array for the descriptions
        var champion = {
            'name': $(this).find(".ChampionInput").val(),
            'description': []
        };

        //Loop through each description textfields of this champion
        $(this).find('.GeneralChangeDescription').each(function() {
                //add the description to the description array of the champion
                champion.description.push($(this).val());
        });         
        //finally put the champion in your champion array
        object.push(champion);
    });

    //Thats just for you, an alert of the json-object
    alert(JSON.stringify(object));
});