在JQuery中从动态表单创建多维数组

Question

I'm trying to capture values from inputs and put them in JQuery object instead of having to deal with PHP indexing.

This 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>
        <br><br>
        <input id="obj" type="hidden" name="obj">
        <input type="submit" name="submit">
    </form>

My script that I'm trying to use to recreate the array:

$("#second_form").submit(function(event) {   
    var object = [];        
    $('.Champion').each(function() {
        var champion = {
            'name': $(this).find(".ChampionInput").val(),
            'change': $(this).find("input:radio:checked").val(),
            'General_Description': [],
            'General_Change':[]
        };
        $(this).find('.GeneralChange').each(function() {            champion.General_Description.push($(this).children(".GeneralChangeDescription").val());
            champion.General_Change.push($(this).children(".General_Change").val());
        });         
        object.push(champion);
    });
    object = JSON.stringify(object);
    $('#obj').val(object); //Sending object to hidden input   
});

And here is the way I used to create this PHP array which messes up indexing when I delete some inputs when creating the form

 foreach($_POST['champion'] as $champion){
                if(isset($_POST['Release'][$ChampionNumber])){
                    $_POST['Release'][$ChampionNumber]=='New' ? $champions[$champion]['New']=1 : $champions[$champion]['New']=0;

                    $_POST['Release'][$ChampionNumber]=='Rework' ? $champions[$champion]['Rework']=1 : $champions[$champion]['Rework']=0;

                }
                if(!empty($_POST['GeneralChangeDescription'][$ChampionNumber])){
                    foreach($_POST['GeneralChangeDescription'][$ChampionNumber] as $indexGeneral=>$GeneralChangeDescription){
                    $GeneralChangeDescriptions[$ChampionNumber+1][$indexGeneral+1] =ucfirst(trim($GeneralChangeDescription));
                    if(substr($GeneralChangeDescriptions[$ChampionNumber+1][$indexGeneral+1], -1)!='.'){
                        $GeneralChangeDescriptions[$ChampionNumber+1][$indexGeneral+1] = $GeneralChangeDescriptions[$ChampionNumber+1][$indexGeneral+1].'.';
                    }
                    $GeneralChangeDescriptions[$ChampionNumber+1][$indexGeneral+1] = preg_replace('/\s\/\s/','/',$GeneralChangeDescriptions[$ChampionNumber+1][$indexGeneral+1]);
                    $GeneralChangeDescriptions[$ChampionNumber+1][$indexGeneral+1] = preg_replace( '/(\.?\d\/?%?)+/', '<strong>$0</strong>', $GeneralChangeDescriptions[$ChampionNumber+1][$indexGeneral+1]);
                    $GeneralChangeDescriptions[$ChampionNumber+1][$indexGeneral+1] = preg_replace( '/\b\w+\.(jpg|png|gif)/', '', $GeneralChangeDescriptions[$ChampionNumber+1][$indexGeneral+1]);                   
                    $champions[$champion]['General']['Change'][] =  $GeneralChangeDescriptions[$ChampionNumber+1][$indexGeneral+1];
                    $champions[$champion]['General']['Type'][] = $_POST['GeneralChange'][$ChampionNumber][$indexGeneral];

                    }
                }

                $ChampionNumber++;              
            }

Removing champions

$('div#ChampionInput').on('click', 'a.Remove',function(){
    var champion = $(this).closest('.Champion');
    var id = champion.data("id");
    var nextChampion = champion;

    while((nextChampion = nextChampion.next()).length != 0){

        nextChampion.attr("data-id",id++);
        nextChampion.children('.ChampionInput').attr('placeholder','Champion '+ id);

    }
    championNumber=id+1;
    championNumberArray=id;
    champion.remove();
});

Removing changes

$('div#ChampionInput').on('click', 'a.RemoveGeneralChange',function(){
        $(this).closest('.GeneralChange').remove();
    });

Here is how my array looks like in PHP: http://i.imgur.com/rURnNTG.png and I want to get array looking like that after sending JQuery object through hidden input in form and obtaining it in PHP. Here is how my JQuery object looks like right now http://imgur.com/2r9iyKN which is not even close.

Here is also JSfiddle of form creation: jsfiddle.net/g50zd384/

Answer 1

If you really need that array, so create it in PHP after sending the form:

$array;
for($i = 1; $i <= count($_POST['champion']); $i++) {
    $champion = $_POST['champion'][$i];
    $array[$champion]['General'] = $_POST['GeneralChangeDescription'][$i];
    $array[$champion]['Type'] = $_POST['GeneralChange'][$i];
    $array[$champion]['Release'] = $_POST['Release'][$i];
}

Your form should be created with this names:

championNumber = 1;
    championNumberArray = 0;
    $('a#AddChampion').on('click',function(){
        $('div#ChampionInput').append(
        '<div class="Champion">\
             <br>\
             <input type="text" class="ChampionInput" name="champion['+championNumber+']" placeholder="Champion '+championNumber+'">\
             <datalist id="champions"></datalist>\
             <input type="radio" name="Release['+championNumber+']" value="New">New\
             <input type="radio" name="Release['+championNumber+']" value="Rework">Rework\
             <input type="radio" name="Release['+championNumber+']" value="None" checked>None\
             <a href="#" class="AddGeneralChange" data-id="'+championNumber+'" onclick="return false;">Add General Change</a>\
             <div class="GeneralChanges">\
             </div>\
             <br>\
         <div>');
        championNumber++;
    });
    $('div#ChampionInput').on('click','a.AddGeneralChange', function(){
        var id = $(this).data('id');
        $(this).siblings('.GeneralChanges').append(
           '<div class="GeneralChange">\
                <textarea type="text" size="20" rows="3" cols="50" maxlength="500" class="GeneralChangeDescription" name="GeneralChangeDescription['+id+'][]" placeholder="Enter General Change Description"></textarea>\
                <select class="General_Change" name="GeneralChange['+id+'][]">\
                   <option value="buff">Buff</option>\
                   <option value="nerf">Nerf</option>\
                   <option value="new">New</option>\
                   <option value="change">Change</option>\
                   <option value="bugfix">Bugfix</option>\
                </select>\
            </div>');
    });

It is important, that you name your inputs in this way! ..not the best way, but better than sending json data in a hidden input form. I hope this could help you.