Js add multiple elements to a form

@{Viewbag.title= "Map Navigation";} @model YT. Xwaj. Public.Application.MapNavigation.Dto.MapNavigationManagementDto<div class= "Easyui-layout" data-options= "Fit:true,border:false" > <div data-options= "region: ' North '" style= "height:80px" > <div class= "form-show" > <div class= "Form" style= "Width:100%;overflow:auto; padding:10px 15px 5px; " > <form id= "form" method= "POST" > <div class= "form-row col-xs-6 col-sm-6 Col                            -md-6 col-lg-6 "> <div class=" form-row col-xs-6 col-sm-6 col-md-6 col-lg-6 ">                            <div class= "Form-title" > Navigation name <span class= "Red" ></span></div> <div class= "Form-value" > <input class= "easyui-validatebox form-control" type= "Te                        XT "Name=" Mapnavigationname "value=" @Model. Mapnavigationname "/> </div>                 </div> <div class= "Form-row col-xs-6 col-sm-6 col-md-6 col-lg-6" >           <div class= "Form-title" > Sort <span class= "red" ></span></div> &L T;div class= "Form-value" > <input class= "easyui-validatebox form-control" type= "number                    "Name=" Sort "value=" @Model. Sort "/> </div> </div> </div> </form> </div> </div> </div> < Div region= "center" > <!--Map--<div id= "mmap" style= "width:100%;height:100%;" param= "tileurl:g oogleweb;bounds:67.5 0 157.5 67.5;backgroundcolor: #FFFEE9; zoom:5;slicezoom:5;maxzoom:19;minzoom:5;fullzoom:5; maptileswidth:2048;maptilesheight:1536;errorimg:/scripts/webgis/mximg/blank.png;maptilesextendpixel:0 ">< /div> </div> <div data-options= "region: ' South ', height:45" > <div class= "Form-row dlgbutrow   "> <div class=" Pull-left ">             <input type= "checkbox" id= "chked" checked= "Checked" class= "chk"/> Confirm and close the window </div> <div class= "Pull-right" > <a href= "javascript:void (0)" class= "btn btn-success" onclick= "Javas Cript:window.page.onSave (); "  ><span class= "icon icon-save" ></span> save </a> <a href= "javascript:void (0)" class= "btn Btn-default "onclick=" Javascript:window.page.close (); " ><i class= "icon icon-remove" ></i> close </a> </div> </div> &LT;/DIV&GT;&L T;/div>@section scripts{<script src= "/scripts/jquery/jquery-1.11.3.min.js" ></script> <script src= "/scripts/common/base.js" ></script> <!--Map--<script src= "/scripts/webgis/mxlib/maphost.js" ></script> &LT;SC Ript src= "/scripts/webgis/mxlib/snap.svg-min.js" ></script> <script src= "/scripts/webgis/mxlib/ Api.min.js "></script> <script src="/scripts/webgis/mxlib/mapv.min.js "></script> <script Src= "/scripts/webgis/mxlib/rectsearchcmd.js" ></script> <script src= "/scripts/map/mapapi.js" ></ script> <script src= "/visualization/js/map.js" ></script> <script type= "Text/javascript" >        (function () {            varConfig = {                /*whether to display CAD*/Showcad:false,                /*Map Display Model*/Mapmodel:' Satellite ',//"Web", "Satellite", "Procad"                /*Map Initial parameters*/mapparams: {x:119.47353798201721, y:36.84729076181995, Zoom:Maxzoom:14,, Control: {enabled:true, Position:mx_anchor_top_left}}, LabelStyle: {background:' Transparent ', Color:"#33ffbb", FontSize:"16px", border:' 0px solid #ccc ', Height:"20px", Lineheight:"20px", fontFamily:"Microsoft Jas Black"}, Markertype: {sensor:Sensor, Video:Video, Enterprise:Enterprise, Danger:"Dangerous Chemicals", Hazard:"Danger Source", Shelter:"Evacuation Sites", Firehouse:Fire Brigade, Medical:"Medical Institutions", communication:"Communication Protection", Technique:"Technical Support", Transport:"Transport Security"                }            }; varpage ={load:function() {page.initmap ();//Show Map                },                //To Create and initialize a map function:Initmap:function () {                    varMaps = Page.maps =NewVisualmap ({el:' Mmap ', MapParams:config.mapParams, ShowCAD:config.showCAD, LabelStyle:config.labelStyle, MarkerType:config.markerType, Mapmode                L:config.mapmodel}); },                //SaveOnSave:function () {                    //Get center point and zoom level                    varZoom =page.maps.maps._map.getzoom (), CenterPoint=Page.maps.maps._map.getcenter (); //console.log (zoom);                    //Console.log (centerpoint);                    varData = $ ("#form"). Serializearray (); Data.push ({name:' Hierarchy ', Value:zoom},{name:"Centralongitude", Value:centerpoint.x}, {name:"Centerlatitude", value:centerpoint.y});                    Console.log (data); /*$.post ('/api/services/public/mapnavigation/editmapnavigationmanagement ', { Mapnavigationname: $ (' input[name= ' Mapnavigationname "]). Val (), Centr  Alongitude:centerpoint.x, Centerlatitude:centerpoint.y, Hierarchy: Zoom, Sort: $ (' input[name= "sort"] "). Val ()}, fun                        Ction (Result) {$.closeparentwindow ();                        }); */$.ajax ({type:"POST", URL:'/api/services/public/mapnavigation/editmapnavigationmanagement ', Data:data, success:function(Result) {$.closeparentwindow ();                }                    }); },                //RefreshOnrefresh:function() {                    $("#datagrid"). DataGrid (' Reload '); },                //CancelClosefunction() {$.closeparentwindow ();            }            };            $ (page.load); Window.page=page;    }()); </script>}

View Code

The upper code does not work correctly.

However, there is a problem: the page only the data in the form is traversed, the map to get the value is not returned to the background, so we have two ways to implement the value back to the background: The method is as follows

1, this way if wearing a lot of circumstances is not very good.

$.post ('/api/services/public/mapnavigation/editmapnavigationmanagement ',     {       mapnavigationname: $ ( ' input[name= ' Mapnavigationname "]). Val (),       centralongitude:centerpoint.x,       centerlatitude: Centerpoint.y,       hierarchy:zoom,       sort: $ (' input[name= ' sort "] '). Val ()     },    function  (result) {       $.closeparentwindow ();  });

2. The bottom method is to push three objects below the Data.push element. (need to see the format returned by the interface)

//SaveOnSave:function () {      //Get center point and zoom level      varZoom =page.maps.maps._map.getzoom (), CenterPoint=Page.maps.maps._map.getcenter (); //console.log (zoom);      //Console.log (centerpoint);      varData = $ ("#form"). Serializearray (); Data.push ({name:' Hierarchy ', Value:zoom},{name:"Centralongitude", Value:centerpoint.x}, {name:"Centerlatitude", value:centerpoint.y});      Console.log (data); $.ajax ({type:"POST", URL:'/api/services/public/mapnavigation/editmapnavigationmanagement ', Data:data, success:function(Result) {$.closeparentwindow (); }      });}

The above code can be implemented to add object elements to the form.

Js add multiple elements to a form