如何使用Javascript将表单输入数据保存到XML文件
How to save form input data to a XML file using Javascript?
我想将这些表单输入保存在一个文件中(例如XML),以便能够在以后的表单中再次使用它:
<html>
<body>
<form action="demo_form.asp">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a page on the server called "demo_form.asp".</p>
</body>
</html>
实现这一点最简单的方法是什么?我不会用PHP或ASP.NET。
除非您使用服务器端语言将数据保存到文件系统(我假设您的意思是希望保存XML文件)是不可能的。JavaScript应用程序无法写入文件系统。
你可以使用HTML5的存储功能。并看看"如何保存数据从一个表单与HTML5存储"
如果您需要将数据保存到您的服务器,那么您将需要服务器端工具ASP。. NET或PHP
但是,您说希望以XML格式存储数据,以便以后可以以的形式使用它。您可以稍后在同一页面中使用这些数据并将其放入XML中,如下所示:interval=setInterval(function(){
first=$('[name*="FirstName"]').val();
last=$('[name*="LastName"]').val();
output='<data><first>'+first+'</first><last>'+last+'</last></data>';
$('#output').text(output);
},200);
http://jsfiddle.net/pA8nC/但是我想不出任何你想要那样做的理由!您可以使用纯JavaScript或JQuery直接访问这些值:
JQuery:firstName=$('[name*="FirstName"]').val();
lastName=$('[name*="LastName"]').val();
JS:
firstName=document.form.FirstName.value;
lastName=document.form.LastName.value;
您所要求的只能在服务器端完成!
从你的问题中我可以理解你是网络开发的新手,我知道你只是想保留数据,以便你可以在需要时使用它
我的建议是只是保持值在cookie或url或隐藏字段作为XML字符串,你最好选择隐藏字段
下面的代码示例将允许您从页面上的字段获取数据,并将它们直接写入到用户本地框的txt文件中。我目前正在寻找一种方法,将它们写出来的XMl为一个项目,我对,但至少我可以得到的数据,我想写出来的文本文件。
var userInput = document.getElementById("userInputId").value;
var fileURL = 'data:application/notepad;charset=utf-8,' + encodeURIComponent(userInput);
var fileName = "test.txt";
if (!window.ActiveXObject) {
var save = document.createElement('a');
save.href = fileURL;
save.target = '_blank';
save.download = fileName || 'unknown';
var event = document.createEvent('Event');
event.initEvent('click', true, true);
save.dispatchEvent(event);
(window.URL || window.webkitURL).revokeObjectURL(save.href);
}
// for IE
else if (!!window.ActiveXObject && document.execCommand) {
var _window = window.open(fileURL, '_blank');
_window.document.close();
_window.document.execCommand('SaveAs', true, fileName || fileURL)
_window.close();
}
这个javascript将在提交表单时触发表单数据的文件下载(对于每个表单)。它不使用XML,因为我不知道您的模式是什么样子的(我怀疑它是否有用,而表单序列化字符串可以使用xhr快速发布)。
http://jsfiddle.net/CKvcV/(function () {
var makeTextFile = function (text) {
var data = new Blob([text], {type: 'text/plain'});
return window.URL.createObjectURL(data);
},
serializeForm = function(form, evt){
var evt = evt || window.event;
evt.target = evt.target || evt.srcElement || null;
var field, query='';
if(typeof form == 'object' && form.nodeName == "FORM"){
for(i=form.elements.length-1; i>=0; i--){
field = form.elements[i];
if(field.name && field.type != 'file' && field.type != 'reset'){
if(field.type == 'select-multiple'){
for(j=form.elements[i].options.length-1; j>=0; j--){
if(field.options[j].selected){
query += '&' + field.name + "=" + encodeURIComponent(field.options[j].value).replace(/%20/g,'+');
}
}
}
else{
if((field.type != 'submit' && field.type != 'button') || evt.target == field){
if((field.type != 'checkbox' && field.type != 'radio') || field.checked){
query += '&' + field.name + "=" + encodeURIComponent(field.value).replace(/%20/g,'+');
}
}
}
}
}
}
return query.substr(1);
}
, _onsubmit = function() {
var _href = makeTextFile(serializeForm(this));
var _a = document.createElement("A");
_a.setAttribute('download', 'export.txt');
_a.setAttribute('target', '_blank');
_a.href = _href;
_a.click();
window.URL.revokeObjectURL(_href);
//return false;
};
[].forEach.call(
document.querySelectorAll('form'),
function(f) { f.onsubmit = _onsubmit; }
);
})();
将其构建到bookmarklet或其他东西中。但是,如果您希望节省一些输入,您可能希望将值存储在localStorage而不是文件中。您没有提到您打算如何重用数据,并且从localStorage中提取数据比构建动态文件上传器并使用户找到正确的文件要容易得多。
- 如何上传一个XML对象并用Perl将其保存在服务器上
- 使用 JavaScript 将多维数组保存到 XML 中
- Jstree在拖放后将树保存到xml文件中
- 将带有用户输入值的HTML表单XML保存到javascript变量中
- 使用Javascript中生成的XML将现有XML保存/更新到服务器
- 在IE8中使用“另存为”execCommand以ANSI格式而不是UCS2-Little Endian保存XML文件
- 如何从HTML页面保存XML文件
- 在 JS 中创建、编辑和保存 XML
- 使用 JavaScript 函数将 HTML 输入中的用户名保存到 XML 或 TXT 文件中的服务器
- 使用 JavaScript 下载 xml 文件并将其保存在变量中
- 如何使用 Ajax 和 JavaScript 保存 XML 文件
- (JS)生成 XML 文件以动态保存数据
- 无法将 XML 中的值保存到 MIRTH JavaScript 中的 TMP 对象
- 在 Node.js 中保存 XML 文件
- 使用var将xml标记数据保存到xml文件中
- 通过PHP保存到XML
- Zimbra/Zimlet:将UserProperties保存为XML
- 是否可以从本地存储数据生成文本或xml文件并将其保存在文件夹中
- 如何在PhantomJS中保存XML GET响应到文件
- 仅使用客户端操作保存XML文件