How to save input/select values from a website to an XML/JSON file and loading automatically filling them out again using JavaScript

Question

I have a question about saving input/select values from a website to an XML/JSON file and loading automatically filling them out again.

So far I've managed to write this: https://jsfiddle.net/Lwvum3qe/17/

There's quite a lot of code, the fragment on jsfiddle is there to give a general idea of the code's function. The most important bits are:

function downloadData(contentType,data,filename){

   var link=document.createElement("A");
   link.setAttribute("href",encodeURI("data:"+contentType+","+data));
   link.setAttribute("style","display:none");
   link.setAttribute("download",filename);
   document.body.appendChild(link); //needed for firefox
   console.log(link.outerHTML);
   link.click();
   setTimeout(function(){
    document.body.removeChild(link);
   },1000);
}

function fromToXml(form){
    var xmldata=['<?xml version="1.0"?>'];
      xmldata.push("<form>");
    var inputs=form.elements;
    for(var i=0;i<inputs.length;i++){
        var el=document.createElement("ELEMENT");
      if (inputs[i].name){
        el.setAttribute("name",inputs[i].name);
        el.setAttribute("value",inputs[i].value);
        xmldata.push(el.outerHTML);
      }

    }
    xmldata.push("</form>");
    return xmldata.join("\n");
}


function download(frm){

    var data=fromToXml(frm);
  console.log(data);

  downloadData("text/xml",data,"export.xml");
}

I use many forms, so saving is only possible for one at a time. I tried replacing the main form ("container") with a div but it didn't help at all. The function reads all the checkbox data, whether they were checked or not. Is it possible to only read data from checked ones? Selects are not saved at all in this case.

The general idea is that I need to be able to read data from a file and fill out all the input/checkbox/select fields according to that data. I know there are a lot of ways of opening a file and parsing it but I'd prefer to use the simplest one you can provide. I'm a beginner when it comes to JS and I've never been good at parsing files, no matter the language. 😞

I'd be truly grateful for any help and tips you're willing to give.

Answer 1

In the fromToXml function, you are checking for inputs[i].name . You should be checking for inputs[i].checked instead.

I also have a few tips that I think you could use to improve your code:

1. Do not use same name for multiple checkboxes, unless the user can check multiple checkboxes of the same type (an array). And if it is an array, you should be using [] after your name. For example, <input name="choice"> should be renamed to <input name="choice[]" /> .
2. If you are using jQuery, use jQuery; avoid using native methods.
3. You can also use the pseudo-class :checked to get selected checkboxes.
4. Unless you specifically need XML, I suggest you to use JSON. JSON stands for JavaScript Object Notation for a reason: it is well supported in JavaScript.
5. Learn to use native Array methods such as forEach , map , and filter . jQuery also has its own array methods such as .map and .each

By using these tips, here is a more beautiful getData function (renamed from fromToXML ).

function getData(form){
  return $(form).find(":checked").map(function(){
    return {
      name: this.name, 
      value: this.value
    };
  }).toArray();
}

Then you can use call this function anywhere in the document using:

var data = getData(myForm);
var dataAsString = JSON.stringify(data);