2

I need to import data from csv file into form. I tried example from this topic:

How to import CSV file into HTML form, and export HTML form to CSV file

Unfortunately it does not work for me. The file is opening, but no data are put into form.

My index.html file looks as follows:

<html lang="en">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" language="JavaScript" src="script.js"></script>
    <script src="https://d3js.org/d3.v3.js"></script>
</head>
<body>  
<input id="upload" type="file">

<form id="csvForm">
    <input id="a"></input>
    <input id="b"></input>
    <input id="c"></input>
    <input id="d"></input>
</form>
<button id="download">Download</button>
</body>
</html>

And script.js file:

document.getElementById("upload").addEventListener("change", upload, false);
document.getElementById("download").addEventListener("click", download, false);

function upload(e) {

    var data = null;
    var file = e.target.files[0];

    var reader = new FileReader();
    reader.readAsText(file);
    reader.onload = function (event) {
        var csvData = event.target.result;

        var parsedCSV = d3.csv.parseRows(csvData);

        parsedCSV.forEach(function (d, i) {
            if (i == 0) return true; // skip the header
            document.getElementById(d[0]).value = d[1];
        });

    }
}

function download(e) {

    data = [["id","value"]];

    var f = d3.selectAll("#csvForm > input")[0];

    f.forEach(function(d,i){
        data.push([d.id, d.value]);
    });

    console.log(data);

    var csvContent = "data:text/csv;charset=utf-8,";
    data.forEach(function (d, i) {
        dataString = d.join(",");
        csvContent += i < data.length ? dataString + "\n" : dataString;
    });

    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "FormData.csv");
    link.click(); 
}

Shall I add something more? Any other library or framework?

Thank you for any replies.

Improve this question

2 Answers 2

Reset to default
5

it works well, just move <script type="text/javascript" language="JavaScript" src="script.js"></script> tag at the end of your <body> tag 

.
.
.
   <script src="https://d3js.org/d3.v3.js"></script>
   <script type="text/javascript" language="JavaScript" src="script.js"></script>
</body>

I can't understand what exactly you need after updating your question, do you want to view the uploaded csv on the textboxes? if so.. 

<html lang="en">
  <head>
    <meta charset="utf-8">
    
</head>
<body>  
<input id="upload" type="file">

<form id="csvForm">
    <input id="a"></input>
    <input id="b"></input>
    <input id="c"></input>
    <input id="d"></input>
</form>
<button id="download">Download</button>
<script src="https://d3js.org/d3.v3.js"></script>
<script type="text/javascript">
    

   document.getElementById("upload").addEventListener("change", upload, false);
   document.getElementById("download").addEventListener("click", download, false);
   var out = "";
   function upload(e) {
    document.getElementById('csvForm').innerHTML = "";

       var data = null;
       var file = e.target.files[0];

       var reader = new FileReader();
       reader.readAsText(file);
       reader.onload = function (event) {
           var csvData = event.target.result;

           var parsedCSV = d3.csv.parseRows(csvData);

           parsedCSV.forEach(function (d, i) {
               if (i == 0) return true; // skip the header
               if(d.constructor === Array){
                    // console.log(d);
                    // document.getElementById(d[0]).value = d[1];
                    createForm(d);
                  }
           });

       }
   }

   function createForm(csv){
    // console.log(out);

    for (var i in csv) {
       out+='<input value="' +csv[i]+ '">';
    }
    document.getElementById('csvForm').innerHTML = out;
    out+='<br>';
   }

   function download(e) {

       data = [["id","value"]];

       var f = d3.selectAll("#csvForm > input")[0];

       f.forEach(function(d,i){
           data.push([d.id, d.value]);
       });

       console.log(data);

       var csvContent = "data:text/csv;charset=utf-8,";
       data.forEach(function (d, i) {
           dataString = d.join(",");
           csvContent += i < data.length ? dataString + "\n" : dataString;
       });

       var encodedUri = encodeURI(csvContent);
       var link = document.createElement("a");
       link.setAttribute("href", encodedUri);
       link.setAttribute("download", "FormData.csv");
       link.click(); 
   }



</script>
</body>
</html>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Now it works as it should. Thank you very much for solving my problem.
-1

Once again thank you for help. But I've got another problem. Now I need to add this uploading control to my web application. The content is generated automatically depending on users behaviour. The part of the code responsible for opening the form is as follows:

function  createFormOrderDetailsCSV()
{
    var out='';
    out+='<input id="upload" type="file">';
    out+='<form id="csvForm">';
    out+='<input id="a"></input>';
    out+='<input id="b"></input>';
    out+='<input id="c"></input>';
    out+='<input id="d"></input>';
    out+='</form>';
    out+='<script src="https://d3js.org/d3.v3.js"></script>';
    document.getElementById("OrderDetailsContainer").innerHTML=out;
    document.getElementById("upload").addEventListener("change", upload, false);
}


function upload(e) {

    var data = null;
    var file = e.target.files[0];

    var reader = new FileReader();
    reader.readAsText(file);
    reader.onload = function (event) {
        var csvData = event.target.result;

        var parsedCSV = d3.csv.parseRows(csvData);

        parsedCSV.forEach(function (d, i) {
            if (i == 0) return true; // skip the header
            document.getElementById(d[0]).value = d[1];
        });

    }
}

And again it is the same. File is open, but no data is transferred to the text input controls in the form.

Improve this answer

16 Comments

i can't understand what exactly u need, you want to view the uploaded csv on the textboxes?
Yes. That is exactly what I need. I need to put csv data into a form inputs, and send them to a database from the form. I am ok with sending to DB, I just can't go over retrieving data from csv file.
ok, I updated my answer check it and tell me if this what you need
fyk my code needs alot of modifications, im just trying to figure out your major needs :)
The problem is that d3.js is not included. I put some alerts to check where the code stops to work, and it stops on the line var parsedCSV = d3.csv.parseRows(csvData); in function upload(e). I need to include d3.js in other way than it is done now. I tried to include it also in html that calls createFormOrderDetailsCSV() function, but it didn't help.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.