Save data from an HTML form to a file using js as possible on the client? enter image description here

  • if without visibility to the client, then dig in the direction of a cookie or localdb. - xSx
  • purely on the client in any way (security), it is necessary to involve a server (for example, AJAX), or something like reading with the help of JAVA applets. - Nikolai Smekalov

1 answer 1

To serialize a form, you can use the jquery .serialize() method, like this:

 $("form").serialize();

You can use the FileSaver library to save the file on the client side.

Add code to convert text to bytes:

 function data2blob(data, isBase64) { var chars = ""; if (isBase64) chars = atob(data); else chars = data; var bytes = new Array(chars.length); for (var i = 0; i < chars.length; i++) bytes[i] = chars.charCodeAt(i); var blob = new Blob([new Uint8Array(bytes)]); return blob; }

Save:

 saveAs(data2blob($("form").serialize()), "myString.txt");

Update:

To download from the file you need to add a download button:

 <input type="file" id="fileToLoad" accept="text/plain" />

Next, create a function that will be engaged in loading:

 function loadFile(e) { var file = e.target.files[0]; var reader = new FileReader(); reader.onload = function(){ var dataURL = reader.result; var data = JSON.parse('{"' + decodeURI(dataURL).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}'); mapJson(data) ; }; reader.readAsText(file, "UTF-8"); }

Special attention should be paid to this:

 JSON.parse('{"' + decodeURI(dataURL).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');

This code is used to turn a string from dataURL format into JSON. In fact, this is unnecessary if you save the file immediately in JSON.

Next, add the mapper function, which will do the assignment of values ​​back:

 function mapJson(data) { for (var i in data) { $('form input[name="'+i+'"],form select[name="'+i+'"]').val(data[i]); } }

Full jsFidle example.

Update 2:

In the example above, checkbox does not work correctly, I had to make some changes.

Added my serialization:

 function getJson(form) { var result = {}; form.find("input, select").each(function (index, element) { var $element = $(element); var name = $element.attr("name"); if (!name) return true; if ($element.is("input[type='checkbox']")) { result[name] = $element.prop("checked"); } else if ($element.is("input[type='radio']")) { if (!result[name]) { result[name] = [] } result[name].push($element.prop("checked")); } else { result[name] = $element.val(); } }); return JSON.stringify(result); }

Changed mapper:

 function mapJson(form, data) { for (var name in data) { var $element = form.find('input[name="' + name + '"],select[name="' + name + '"]'); if ($element.is("input[type='checkbox']")) { $element.prop("checked", data[name] || false); } else if ($element.is("input[type='radio']")) { $element.each(function(index, value){ $(value).prop("checked", data[name][index] || false); }); } else { $element.val(data[name]); } } }

Loading from file now looks like this:

 reader.onload = function () { var data = JSON.parse(reader.result); mapJson(data); }

Working example

  • An example on jsfidle . - Codd Wrench
  • It seems as if everything is logical, but you can explain, for example, the user chose the 10 select option, these selected positions were saved to a file. Then the user opens the * .html file again and I think how to make these selected items appear in the html file - Eliot
  • @Eliot, look at the update, I found a couple of jambs, I'll fix it now. In general, this is one of the options. You can save data in localStorage , it all depends on the specific task. - Codd Wrench
  • thanks for what you need) - Eliot
  • With this example, a new file is created each time, and how can you make that if the user opened the file to make changes (chose another select option) then the changes would be saved in the file that the user opened. - Eliot