как сделать maltiple поля в форме
 

Здравствуйте вот у меня есть многоуровневая форма
http://prntscr.com/i08uby
И на втором уровне у меня есть свойства товара
http://prntscr.com/i08uj0
Как мне в коде HTML нужно обозначить поля формы чтобы на выходе получить правильный массив данных со вложенными уровнями?

Данные в форму доставляются вот таким страшным аяксом

$.ajax({
                    type: "POST",
                    dataType: 'json',
                    async: false,
                    url: '/show_subcat',
                    data: {id_cat: id_cat,is_user:1}, // serializes the form's elements.
                    success: function (data) {
                        if(data.message=='null'){
                        //проверить чтобы соседние последующие блоки были пусты

                        $('input[name="id_cat"]').val(data.value.id)
                        $('.cat_name').val(data.value.info.name)
                            alert('меняется категория')
                        //достать все свойства категории и отобразить в блоке #properties
                            $.ajax({
                                type: "POST",
                                dataType: 'json',
                                async: false,
                                url: '/show_property_by_category',
                                data: {id_cat: data.value.id}, // serializes the form's elements.
                                success: function (dataprop) {

                                $('#properties').empty();
                                     $.each( dataprop, function( k, prop ) {
                                      //alert(prop.name)
                                      /*   prop_array = prop.data.split(',');*/
                                       $('#properties').append(' <div style="border-right:1px solid #000;border-left:1px solid #000" class="prop col-md-3" >' +
                                            '<input type="hidden" value="'+prop.id+'">' +
                                           ' <div><h3 style="text-align:center;margin-top:10px;">'+prop.name+'</h3></div>'
                                            +'<div id="prop_datas_'+k+'" class=""></div>'+
                                            '</div>')

                                    $.each( prop.data, function( v, dat ) {
                                    //alert(dat.data)

                                    $('#prop_datas_'+k).append('<div><div class="i-checks"><label> <input type="radio" value="'+dat.id+'" name="a_'+prop.id+'"> <i></i> '+dat.data+'</label></div></div>');
                                    });


                                         $('.i-checks').iCheck({
                                             checkboxClass: 'icheckbox_square-green',
                                             radioClass: 'iradio_square-green',
                                         });
                                     });
                                }

                            });


                        //если (data.value.info.parent_num) ==2
                        //удалить 3,4
                            // если (data.value.info.parent_num) ==3
                            //4
                         if(data.value.info.parent_num==2){
                             $('.cat_block_3').empty();
                             $('.cat_block_4').empty();
                         }
                         else if(data.value.info.parent_num==3){
                             $('.cat_block_4').empty();
                         }

                        }
                       else{
                        $('.'+new_block_cl+'').empty();
                        switch(new_block_cl){
                            case 'cat_block_2':
                                $('.cat_block_3').empty();
                                $('.cat_block_4').empty();
                                break;
                            case 'cat_block_3':
                                $('.cat_block_4').empty();
                                break;

                        }
                        $.each( data.value, function( key, value ) {
                            $('.'+new_block_cl+'').append(' <a ><div class="cat_block" >' +
                                '<input type="hidden" value="'+value.id+'">' +
                                value.name+
                                '<span class="fa arrow" style="float:right"></span>' +
                                '</div></a>')
                        });

                    }}

                });

Действительно страшный, зачем вложенный запрос? Ajax в форму вообще ничего не может ни доставить, ни добавить, форма это html элемент на странице. Либо сервер получает поэтапно несколько форм обслуживающих одну и тут же задачу, либо форма одна, просто ее заполнение разбито на этапы.

А как быть если данные появляются по мере заполнения формы на какое правило вы ссылайтесь? Что мешает мне заполнять определенные поля в зависимости от выбранных значений в других полях. Кроме того этот Аякс обслуживает уникальный элемент управления - выбор категорий и по другому по моему никак.да и по сути вопрос в другом.спасибо

Данные в любом случае не резиновые. К примеру, нужно собрать сведения о человеке.

Форма 1: кто такой, фио пол, родился, крестился .... все.

форму отправили, сервер запомнил, выдал форму 2, но знает, что сбор данных не закончен, и последней должна прийти форма 4. При этом сервер знает какие данные какая из форм должна прислать. Пользователь при этом может делать шаг назад, изменяя данные, которые сервер также получает.

В кокой либо из форм могут динамически добавляться поля. Это не проблема как для клиента, так и для сервера, ибо он знает об этом и ожидает такого.

Это же самое можно отправить одной формой, только выводить форму на экран частями, для удобства.

В каком формате (структура) при этом отправлять данные, это уже иной вопрос, связанный не сколько с формой как таковой, а с логикой сценария на сервере, структурой данных в БД.

И чтобы это обрабатывать на клиенте, отправить на сервер, совсем не требуется делать вложенных запросов. Если "выбор категорий", это запрос данных необходимых для заполнения форм, то причем тут вложенные запросы?

Это не отвечает на вопрос темы при всем уважении

А причем тут JS? На выходе это где? Ну наверное же данные для сервера, и серверному сценарию их обрабатывать. Так кто должен решать вопрос о предпочтениях, о структуре массива?

Вы задаете вопрос, ответ на который в общем-то должен дать сервер, и при этом приводите код не понять какой и для чего. Поля формы имеют имена, вот как удобнее серверу их принять, так и именуйте. На клиенте же нужна будет только одна операция - serialize().

Но есть же имена вот такого плана name="а[ ] " я об этом спрашиваю

Да, если сервер использует такой язык как РНР, он поместит такой набор данных в массив под ключом а. Но каким боком к этому имеет отношение JS и почему это должно решаться программным способом? Причем тут Ajax?

Всю структуру вашей формы/форм в общем уже должна определить база данных, то есть таблицы завязанные на этой форме/формах. И отдавая форму клиенту именование полей ее уже определено. А те поля что добавляются динамически и в одном наборе, так это просто клоны.