How to save html form created dynamically using javascript
Question
I have a dynamic html form that is created with a javascript file where i ask the user to enter the number of fields and the input name of the fields. I want to know if is possible to the user download the form created dynamically as html page. The website doesn't have a database.
This snippet demonstrates how i create a form dynamically, all of this is being done on the client side.
var Nome; // Nome do esquema var Desc; // descrição do esquema var temas = []; // Nome dos temas do form var fields = []; // nr de campos var FL= []; // Nome do campo var FLT =["date","time","number","text"]; var TF =[]; // tipo do campo var Asset; var a=0; function Temas(){ "use strict"; Nome= prompt("Qual o Nome do Esquema de Metadados?"); Desc = prompt("Introduza a Descrição do Esquema."); Asset = prompt("Introduza o valor da TAG AssetSubtype."); var nT=prompt("Quantos temas tem o formulário?"); if(nT === null || nT === "") { alert("User cancelled the prompt."); } else { for (var i=0; i<nT; i++){ temas.push(prompt("Introduzir Tema")); if(temas[i] === null || temas[i] === "") { alert("User cancelled the prompt."); } fields.push(prompt("Quantos campos terá o " + (i+1) + "º tema ?")); if(fields[i] === null || fields[i] === "") { alert("User cancelled the prompt."); } var f = fields[i]; for( var k=0; k<f; k++){ FL.push(prompt("Qual é o Nome do " + (k+1) + "º campo?")); if(FL[k] === null || FL[k] === "") { alert("User cancelled the prompt."); } TF.push(prompt("Qual o tipo do " + (k+1) + "º campo? "+ "(Text | Number | Time | Date)")); if(FL[k] === null || FL[k] === "") { alert("User cancelled the prompt."); } if(TF[k] === FLT[0]) { TF.push(FLT[0]); } if(TF[k] === FLT[1]) { TF.push(FLT[1]); } if(TF[k] === FLT[2]) { TF.push(FLT[2]); } if(TF[k] === FLT[3]) { TF.push(FLT[3]); } } } } alert("Bem sucedido"); } // Função guardar nome e desc de esquema txt /*function save(){ var blob = new Blob([Desc], {type: "text/plain;charset=utf-8"}); saveAs(blob, Nome+".txt"); } */ function gerar(){ "use strict"; var f = document.createElement("form"); f.setAttribute('method',"post"); f.setAttribute('action',""); f.setAttribute("class", "FormClass"); for(var l=0;l<temas.length; l++){ var div = document.createElement("div"); div.setAttribute('class', 'form'); div.setAttribute('id', "form"+(l+1)); var P = document.createElement('p'); // Heading of Form P.innerHTML = temas[l]; div.appendChild(P); for(var j=0;j<fields[l];j++){ var i = document.createElement("input"); i.setAttribute('name', FL[a+j]); i.setAttribute('type', TF[a+j]); i.setAttribute('placeholder', FL[a+j]); div.appendChild(i); } a=a+parseInt(fields[l]); if(l%2===0){ div.style.width='50%'; div.style.float='left'; } else{ div.style.width='48%'; div.style.float='right'; } f.appendChild(div); } document.getElementById('form').appendChild(f); }
<!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../CSS/form.css" > </head> <script src="../JS/FormDinamico.js"></script> <script src="../JS/XML.js"></script> <script src="../JS/XML-HTML.js"></script> <script> function Reset() { document.getElementsById("1").reset(); } </script> <style> button{ background-color: green; margin-top: 10px; margin-left: 11%; border: 5px; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; } .main{ width:70%; } }</style> <body> <div id="main"> <button onclick="Temas();" id="gerar1">Criar</button> <button onclick="gerar();" id="gerar">Gerar</button> <div id="form"> <!--form here --> <div id="form7"> <button class="button" type="button">Procurar XML</button> <button class="button" type="button" name="btnSub" onclick="download(this.form)">Gerar XML</button> <button class="button" type="button" value="Reset" onclick="Reset();">Reset</button> <!-- <button class="button" type="button" onclick="download">Save</button> --> </div> </div> </div> </body> </html>
1 answers
solution1
2 ACCPTED 2018-05-28 14:17:07
You can load it on a new tab setting the headers (simply generate a DOM with proper headers to it and write as html) for it or with an html link (HTML5 only. server side lang needed to generate a file).
See:
for further details. You'll need to do one of this things:
1- write a file with dynamically generated content on the server to deliver it as a downloadable response (for example with php, c#, java or whatever server-side programing language your server admits).
2- Generate a printable document "on the fly" for example as .pdf (i didnt tryed with an html document but i suppose it's possible too) and set the headers to force the browser to interpret it as downloadable.
There's an example:
<html> <head> <title> </title> </head> <body id="html-doc"> <br/> <form id="main" method="post" action="main.php"> <label>surname: <input type="text" name="surname" /></label><br/><br/> <label>Comment: <textarea id="text-val" rows="4"><strong>This is the</strong> content of <a href="#">my file</a></textarea></label><br/> <input type="button" id="dwn-btn" value="submit"/> <p></p> <a onclick="this.href='data:text/html;charset=UTF-8,'+encodeURIComponent(document.documentElement.outerHTML)" href="#" download="page.html">Download all as HTML</a> </form> </body> </html>
Edited to allow download the entire HTML code.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.