[英]How to save html form created dynamically using javascript
我有一个用javascript文件创建的动态html表单，在该表单中，我要求用户输入字段数和字段的输入名称。 我想知道用户是否可以下载动态创建为html页面的表单。 该网站没有数据库。
此代码段演示了如何动态创建表单，所有这些都是在客户端完成的。
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>
您可以将其加载到新的选项卡上，并为其设置标题（只需生成带有正确标题的DOM并以html格式编写）或使用html链接（仅HTML5。需要生成文件的服务器端lang）。
看到：
有关更多详细信息。 您需要执行以下操作之一：
1-在服务器上写入包含动态生成的内容的文件，以将其作为可下载的响应（例如，使用php，c＃，java或服务器允许的任何服务器端编程语言）传递。
2-生成一个可打印的文档，例如“ pdf”（我没有尝试使用html文档，但我想也有可能），并设置标题以强制浏览器将其解释为可下载。
有一个例子：
<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>
编辑以允许下载整个HTML代码。
如何使用JavaScript动态删除html中创建的输入表单
[英]How to dynamically remove a input form created in html using javascript
如何使用Javascript将动态创建的元素保存到json？
[英]how to save dynamically created elements to json using Javascript?
从Javascript对象循环动态创建的表单。 如何将数据保存回对象
[英]Form created dynamically from Javascript Object loop. How to save data back to object
如何使用 javascript 下拉列表将 append 已经创建的 html 表格放入表格中？
[英]How to append already created html form into table using javascript dropdown?
如何使用 javascript 将所需的 HTML 元素动态添加到表单中？
[英]How to dynamically add a required HTML element to a form using javascript?
从动态创建的html表单按钮调用Javascript函数
[英]Call a Javascript function from dynamically created html form button
如何在JavaScript循环内为动态创建的HTML表单元素分配不同的ID
[英]How to assign different ID to dynamically created HTML form elements inside a javascript loop
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.