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

[imedia]

Здравствуйте вот у меня есть многоуровневая форма
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>')
                        });

                    }}

                });

[laimas]

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

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

[imedia]

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

[laimas]

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

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

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

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

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

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

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

[imedia]

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

[laimas]

Как мне в коде HTML нужно обозначить поля формы чтобы на выходе получить правильный массив данных со вложенными уровнями?

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

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

[imedia]

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

[laimas]

о есть же имена вот такого плана name="а[ ] "

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

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