Home » Javascript » Fill form with xml file selected by user

Fill form with xml file selected by user

Posted by: admin June 30, 2018 Leave a comment

Questions:

Part of the html form

<div id="form1">

        <p>Local</p>
        <input class="a" type="date" name="Data" id="Data" placeholder="Data" />
        <input class="a" type="time" name="Hora" id="Hora" placeholder="Hora" />
        <input class="a" type="text" name="Sala" id="Sala" placeholder="Sala" />
        <input class="a" type="text" name="Edifício" id="Edifício" placeholder="Edifício" />
        <input class="a" type="text" name="Cidade" id="Cidade" placeholder="Cidade" />
        <input class="a" type="text" name="País" id="País" placeholder="País" />
     </div>

I have a html form, and its capable of creating a XML file with the inputs value like this. The “key” tag is the name of the input, and the “value” tag is the value.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<AssetInfo xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'>
<assetSubType>Audio_Video</assetSubType>
<state>importado</state>
<name>transferir (1).jpeg</name>
  <customMetaData>
     <key>Data</key>
     <value>2018-05-21</value>
  </customMetaData>
  <customMetaData>
     <key>Hora</key>
     <value>12:12</value>
  </customMetaData>
  <customMetaData>
     <key>Sala</key>
     <value>sala 2</value>
  </customMetaData>
  <customMetaData>
     <key>Edifício</key>
     <value>casa</value>
  </customMetaData>
  <customMetaData>
     <key>Cidade</key>
     <value>porto</value>
  </customMetaData>
  <customMetaData>
     <key>País</key>
     <value>Portugal</value>
  </customMetaData>
</AssetInfo>

And I want to fill the form inputs with the values inside the “value” tag.

I tried to do this, the user select the xml file, it searchs the xml file for the “key” and value “tag” store the text insert in those tags, then search in all the inputs of the form the “name” = text in the “key” tag and fill with the value from the “value” tag.

function loadData(fileInput) {
    "use strict";
  var file = fileInput.files[0];
  var fileURL = URL.createObjectURL(file);
  var req = new XMLHttpRequest();
  req.open('GET', fileURL);
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(fileURL, 'text/xml');   

  req.onload = function() { 
    URL.revokeObjectURL(fileURL);
   populateData(fileInput.form, xmlDoc);
  };

  req.onerror = function() {
    URL.revokeObjectURL(fileURL);
    console.log('Error loading XML file.');
  };    
  req.send();
}    

function populateData(form, xmlDoc){ 
    "use strict";
  var root = xmlDoc.documentElement;
  var metadataNodes =root.querySelectorAll("customMetaDados");
    var map={};
    metadataNodes.forEach(function(metadata) {
    var key = metadata.querySelector('key').textContent;
    var value = metadata.querySelector('value').textContent;
    map[key] = value;
  });

    for (var i = 0; i < form.elements.length; i++) {
    var input = form.elements[i];
    if(input.name){ 
        input.value = map[input.name] || '';        
        }
          }
      }    

function readXML(){
    "use strict";
    var xml = new XMLHttpRequest();
    xml.open('GET', 'xml/*', false);
    xml.send();
    var xmlData=xml.responseXML;
    if(!xmlData){
        xmlData=(new DOMParser()).parseFromString(xml.responseText,'text/xml');
        var emp = xml.Data.getElementByTagName("customMetaDados");


        for(var i=0;i<emp.length;i++){
            var value= emp[i].getElementsByTagNAme("value")[i].firstCHild.data;
            input.value=value;
        }
    }
}
Answers: