Get complicated form data

　　The basic style sheet as follows: 

 

 

 

Fellow basic information form can continue to add.

 

 

 

 

The basic part of the HTML code Academy case (Fellow substantially more than in the case where the append basis):

< Div style : = "text-align = left left" class = "add_academician_elem" > 
                < div class = "" style "; Center =" width: 100%;::; font-size 22px text-align = left > 
                    Current are < span class = "number_academician" > . 1 </ span > parts Academy bASIC
                     < Button class = "delete_academician layui layui-BTN-BTN-BTN-SM-layui Danger" type = "Button" > 
                        delete the current Academy bASIC 
                    </button>
                </div>
                <div>
                    <span >院士姓名</span><input name="ac-name" type="text"  lay-verify="required">
                    <span >出生日期</span><input name="ac-birthday" type="number" class="zp-input lay-Date" lay-verify="required">
                </div>
                <div>
                    <> <span</disciplines>spaninput name="ac-tech_area" type="text"  lay-verify="required">
                    <span >邮箱地址</span><input name="ac-email" type="text"  lay-verify="required">
                </div>
                <div>
                    <span >院士联系电话</span><input name="ac-phone" type="number"  lay-verify="required">
                    <span >传真</span><input name="ac-fax" type="text"  lay-verify="required">
                </div>
                <div>
                    <span >工作单位</span><input name="ac-firm_name" type="text"  lay-verify="required">
                    <span >是否是驻湘院士</span>
                    <select name="ac-enter" class="c4" lay-ignore=""Lay-Verify = "required" > 
                        < Option value = "" > </ Option > 
                        < Option value = "yes" > is </ Option > 
                        < Option value = "NO" > No </ Option > 
                    </ SELECT > 
                < / div > 
                < div > 
                    < span   style = "" > is the Chinese Academy of Sciences or the Chinese Academy of Engineering </ span > 
                    <select name="ac-come_from"  Lay-the ignore = "" Lay-the Verify = "required" > 
                        < the Option value = "" > </ the Option > 
                        < the Option value = "Chinese Academy of Engineering" > Chinese Academy of Engineering </ the Option > 
                        < the Option value = "Chinese Academy of Sciences" > Chinese Academy of Sciences </ Option > 
                    </ SELECT > 
                </ div > 

                < div > 
                    < H3 class = "" style = "width: 100%; font-size: 16px;text-align: left;padding-left: 30px;margin-top: 10px;"> 
                        Academicians and business cooperation projects 
                    </ h3 > 
                    < div > 
                        < span > Project Name </ span > 
                        < the INPUT name = "ac_aoo-project_name" of the type = "text"   Lay-the Verify = "required" > 
                    </ div > 
                    < div > 
                        < span > cooperation projects start and end time </ span > 
                        < the INPUT name = "ac_aoo-Start" of the type = "Number The" class = "lay-Date zp-input" style="width: 95px;" placeholder="开始时间" lay-verify="required" lay-key="3">
                        <input name="ac_aoo-end" type="number" class="lay-Date zp-input" style="width: 95px;" placeholder="结束时间" lay-verify="required" lay-key="4">
                        <span >销售收入（万元）</span>
                        <input name="ac_aoo-sale_revenue" id="sale_revenue" type="number"  lay-verify="required">
                    </div>
                    <div>
                        <span >利税（万元）</span>
                        <input name="ac_aoo-loan" id="loan" type="number"  lay-verify="required">
                        <span >新增就业</span>
                        <input name="ac_aoo-new_employment" type="text"  lay-verify="required">
                    </div>
                </div>
                <div>
                    <h3 class="" style="width: 100%;font-size: 16px;text-align: left;padding-left: 30px;margin-top: 10px;">
                        申报专利或品种审定
                    </h3>
                    <textarea name="ac_aoo-patent_or_variety" cols="30" rows="10" placeholder="" lay-verify="required"></textarea>
                </div>
                <div>
                    <h3 class="" style="width: 100%;font-size: 16px;text-align: left;padding-left: 30px;margin-top: 10px;">
                        经费投入情况
                    </h3>
                    <textarea name="ac_aoo-invest_fund" cols="30" rows="10" placeholder="" lay-verify="required"></textarea>
                </div>
                <div style="margin-bottom: 30px;">
                    <h3 class="" style="width: 100%;font-size: 16px;text-align: left;padding-left: 30px;margin-top: 10px;">
                        Research priorities and economic, social analysis 
                    </ h3 > 
                    < the TextArea name = "ac_aoo-benefit_analysis" cols = "30" rows = "10" placeholder = "" Lay-the Verify = "required" > </ the TextArea > 
                </ div > 

            </ div >

 

HTML structure:

 

 

　Data to be transmitted to the rear end of the following format:

 

Fellow of the basic situation of the " Academy of business cooperation with project situation " as academicianCooperationProject

 

Part js:

 　　　　/**
         *  获取多条院士基本情况
         */
        let academicianArr1 = [];
        let academicianArr2 = [];
        let academician_elem = $('.add_academician_elem');
        for (let i = 0; i < academician_elem.length; i++) {
            let inputElem = academician_elem.eq(i).find('input');
            let textareaElem = academician_elem.eq(i).find('textarea');
            let selectElem = academician_elem.eq(i).find('select');

            let tempObj1 = {};
            let tempObj2 = {};

            function getElemData(elem) {
                for (let i = 0; i < elem.length; i++) {
                    if (!elem.eq(i).attr('name').indexOf('ac-')) {
                        tempObj1[elem.eq(i).attr('name').slice(3)] = elem.eq(i).val();
                    } else {
                        tempObj2[elem.eq(i).attr('name').slice(7)] = elem.eq(i).val();
                    }
                }
            }

            getElemData(inputElem);
            getElemData(textareaElem);
            getElemData(selectElem);


            academicianArr1.push(tempObj1);
            academicianArr2.push(tempObj2);

　　　　　　　　allData.academicianList = academicianArr1;
　　　　　　　　allData.academicianCooperationProjectList = academicianArr2;

        }

 

I mainly use a combination of the two previous blog.