Как сохранить входные данные формы в файл XML, используя 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.
5 ответов
Если вам нужно сохранить данные на вашем сервере, то вам понадобятся серверные инструменты 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);
Но я не могу придумать причину, почему вы захотите это сделать! Вы можете использовать простой JavaScript или JQuery для прямого доступа к значениям:
JQuery:
firstName=$('[name*="FirstName"]').val();
lastName=$('[name*="LastName"]').val();
JS:
firstName=document.form.FirstName.value;
lastName=document.form.LastName.value;
Если вы не используете язык серверной стороны, сохранение данных в файловой системе (я предполагаю, что вы хотите сохранить файл XML) невозможно. Приложение JavaScript не имеет возможности записи в файловую систему.
Вместо этого вы можете использовать возможности хранения HTML5. И посмотрите на " Как сохранить данные из формы с хранилищем HTML5"
То, что вы просите, может быть сделано только на стороне сервера!
Из вашего вопроса я понял, что вы новичок в веб-разработке, и я знаю, что вы просто хотите сохранить данные, чтобы вы могли использовать их позже по требованию.
Я предлагаю просто сохранить значения в cookie, или в url, или в скрытом поле в виде строки XML, лучше выбрать скрытое поле.
Этот пример кода ниже позволит вам получить данные из полей на странице и записать их в текстовый файл непосредственно в локальный ящик пользователя. В настоящее время я ищу способ выписать их в 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).
(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; }
);
})();
Создайте это в букмарклет или что-то еще. Но если вы хотите сэкономить при печати, вы можете сохранить значение в localStorage, а не в файле. Вы не упоминаете, как собираетесь использовать данные, и было бы намного проще извлечь их из localStorage, чем создать динамический загрузчик файлов и заставить пользователя найти правильный файл.