how to save dynamically added div in another html file ?

Question

i added dynamic div. now i want save it and open in another page...

dip vyas · Answer

Untitled Document .drag-left ul li { list-style-type: none; margin: 20px 0px; } .drag-left { border-right: 1px solid #000; width: 25%; display: inline-block; vertical-align: top; height: 100vh; } .drag-right { width: 74%; display: inline-block; vertical-align: top; } .drag-right-1 { width: 80%; margin: auto; border:1px solid #000; margin-top: 50px; min-height: 500px; padding: 20px; } .drag-right-1 li { list-style-type: none; } #basicTable td { border: 1px solid red; height: 100px; } #basicTable { width: 100%; } #basicTable tr { min-height: 50px; } #my-table { width: 100%; } #my-table td { border: 1px solid red; height: 100px; } #drag-right-1 .myid1 { display: block; width: 100%; vertical-align: top; margin-top: 30px; min-height: 70px; border: 1px solid #000; float: left; } #drag-right-1 .myid2 { display: inline-block; width: calc(50% - 2px); vertical-align: top; margin-top: 30px; min-height: 70px; border: 1px solid #000; } #drag-right-1 .myid3 { display: inline-block; width: calc(33.3% - 2px); vertical-align: top; margin-top: 30px; min-height: 70px; border: 1px solid #000; } #drag-right-1 .myid4 { display: inline-block; width: calc(25% - 2px); vertical-align: top; margin-top: 30px; min-height: 70px; border: 1px solid #000; } #drag-right-1 .myid5 { display: inline-block; width: calc(20% - 2px); vertical-align: top; margin-top: 30px; min-height: 70px; border: 1px solid #000; } .add { display: block; } .btn-block { display: block; } div#drag-right-1:after { content: ''; display: block; clear: both; } .drag-two { border: 1px solid red; height: 50px; } .drag-form-2 { display: inline-block; width: 49.6%; margin: 20px 0px; border: 1px solid #ddd; min-height: 70px; overflow: hidden; vertical-align: top; } .drag-form-1 { display: block; width: 100%; margin: 20px 0px; border: 1px solid #ddd; min-height: 70px; overflow: hidden; } .drag-form:after { content: ' '; display: block; clear: both; } .drag-form .drag-input.ui-draggable input[type=text], .drag-form textarea{ width: 100%; min-height: 30px; } .drag-form textarea { min-height: 100px; } .drag-form .ui-draggable { margin: 20px; position: relative; } .drag-form .fa-times-circle { border: 1px solid red; } #Section1 > div { float: left; width: calc(25% - 1px); /*width: 1%;*/ border-right: 1px dotted red; text-align: center; height: 100%; } #Section1 { display: block; } .div-2 { height: 100%; width: calc(50% - 2px); float: left; border: 1px solid #000; min-height: 100px; } .div-1 { height: 100%; width: calc(100% - 2px); float: left; border: 1px solid #000; min-height: 100px; } #myForm .myid2 { width: calc(50% - 12px); margin-right: 10px; } .droppedFields input[type=text], .droppedFields textarea { width: 100%; min-height: 30px; } .droppedFields .ui-draggable { margin: 20px; position: relative; } .droppedFields textarea { min-height: 100px; } .droppedFields select { width: 100%; min-height: 30px; } .live { float: right; cursor: pointer; } .drag-right-2:after { content: ''; display: block; clear: both; } .html-content .btn-block { display: none; } .save { float: right; } Male Female Other Volvo Saab Fiat Audi submit one column two column three column four column five column save First Name Last Name Phone Number Gender address --> $(document).ready(function() { function makeDraggable() { $(".drag-input") .draggable({ containment: $('body'), helper: "clone", stack: "div", cursor: "move", cancel: null }); } function Droppable(){ $(".droppedFields").droppable({ accept: ":not(.ui-sortable-helper)", drop: function (event, ui) { var draggable = ui.draggable; draggable = draggable.clone(); draggable.appendTo(this); // $(ui.draggable).hide(); makeDraggable(); } }); } $(function () { var _ctrl_index = 1001; // function docReady() { $(".Resizable").resizable({ handles: 'e' }); makeDraggable(); $(".add1").click(function(){ for(var i=1 ;i $(".drag-right-2").append(" ") Droppable(); }); $(".add2").click(function(){ for(var i=1 ;i $(".drag-right-2").append(" ") Droppable(); }); $(".add3").click(function(){ for(var i=1 ;i $(".drag-right-2").append(" ") Droppable(); }); $(".add4").click(function(){ for(var i=1 ;i $(".drag-right-2").append(" ") Droppable(); }); $(".add5").click(function(){ for(var i=1 ;i $(".drag-right-2").append(" ") Droppable(); }); }); }); function showTableData() { document.getElementById('content').innerHTML = ""; var myTab = document.getElementById('drag-right-2'); // LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER. for (i = 1; i // GET THE CELLS COLLECTION OF THE CURRENT ROW. var objCells = myTab.rows.item(i).cells; // LOOP THROUGH EACH CELL OF THE CURENT ROW TO READ CELL VALUES. for (var j = 0; j content.innerHTML = content.innerHTML + ' ' + objCells.item(j).innerHTML; } content.innerHTML = content.innerHTML + ' '; // ADD A BREAK (TAG). } } here is my code first i add column dynamic ...then after i drag and drop item from left sidebar in column now i want save button click to save dynamic add column and drop item in column open in new html page.

Bidyasagar Mishra · Answer

Hi dip vyas, i have created complete code for you please follow the code Append fields to div Example: html > head > script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" > script > script type = "text/javascript" > $(document).ready(function(){ var arrayObject =[]; $("#btnAddDiv").click(function(){ var html = " " ; $("#divAppend").append(html); arrayObject.push(html); localStorage.setItem("array", JSON.stringify(arrayObject)); }); }); script > head > body > div id = "divAppend" > div > button id = "btnAddDiv" > Add Div button > body > html > Viewpage Example: html > head > script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" > script > script type = "text/javascript" > $(document).ready(function(){ var array = JSON .parse(localStorage.getItem("array")); for( i = 0 ;i array.length ;i++){ var html = array [i]; $("#divAppendBody").append(html); } }); script > head > body > div id = "divAppendBody" > div > body > html >

dip vyas · Answer

Bidyasagar mishra plz can you give me a demo with example? Thanks for advice

Sivakumar Koneti · Answer

Hello dip vyas read once this link and follow example you can get solution https://stackoverflow.com/questions/47304883/how-to-save-dynamically-added-div-elements

Bidyasagar Mishra · Answer

save your dynamic field to any webstorage (window.localStorage,window.sessionStorage) and append to your new page . Reference: https://www.w3schools.com/html/html5_webstorage.asp

Bidyasagar Mishra · Answer

Save your dynamic field details (field type,atribute,value) to a xml file or database then append that field to you new page .

how to save dynamically added div in another html file ?

Answers (6)