html form which has text and table now I want to save and retrieve the data in a simple text file how to achieve it?

Question

I have created a html form which has text(name and contact num) and table.

Problem i have to save and retrieve the data which is entered in those fields in a simple text/csv file using javascript.

Can any one help me out with this?

<html>

<head>
  <title>Assignment</title>
  <script>
    function addRow()

     {
      var qualific = document.getElementById("Qualification");
      var percent = document.getElementById("Percentage");
      var year = document.getElementById("yop");
      var univers = document.getElementById("university");
      var table = document.getElementById("dataTable");
      var rowCount = table.rows.length;
      var row = table.insertRow(rowCount);
      row.insertCell(0).innerHTML = '<input type="text" id="Qualification">';
      row.insertCell(1).innerHTML = '<input type="NUMBER" id="Percentage">';
      row.insertCell(2).innerHTML = '<input type="NUMBER" id="yop">';
      row.insertCell(3).innerHTML = '<input type="text" id="university">';
    }


     //delete row 
    function deleteRowEd(r) {
      var i = r.parentNode.parentNode.rowIndex;
      document.getElementById("dataTable").deleteRow(i);
    }

    function myFunctionEd() {
      alert("Are you sure you want to delete this row?");
    }
  </script>
</head>

<body>
  <p class="first"><b> Name:</b>&nbsp;&nbsp;&nbsp;*
    <input type="text" name="firstname" style="text-transform: capitalize" required placeholder="Enter a valid name" />
  </p>
  <b> Contact Number:</b>&nbsp;&nbsp;&nbsp;*
  <input type="text" name="pcn" required placeholder="Enter a valid number" onblur="validatenumber(this);" onkeypress="return onlyNos(event,this);" size="6" maxlength="10" />
  </br>
  </br>


  <b>Education Details:</b>
  <table id="dataTable" border="1" style="width:50%;text-align:center;">
    <tr>
      <td><b>Qualification<b></td>
    <td><b>Percentage</b>
      </td>
      <td><b>Year of Passout</b>
      </td>
      <td><b>University</b>
      </td>
      <td></td>
    </tr>
    <tr>
      <td>
        <input type="text" id="Qualification">
      </td>
      <td>
        <input type="number" id="percentage">
      </td>
      <td>
        <input type="number" id="yop">
      </td>
      <td>
        <input type="text" id="university">
      </td>

    </tr>
    <tr>
      <td>
        <input type="text" id="Qualification">
      </td>
      <td>
        <input type="number" id="percentage">
      </td>
      <td>
        <input type="number" id="yop">
      </td>
      <td>
        <input type="text" id="university">
      </td>

    </tr>
    <tr>
      <td>
        <input type="text" id="Qualification">
      </td>
      <td>
        <input type="number" id="percentage">
      </td>
      <td>
        <input type="number" id="yop">
      </td>
      <td>
        <input type="text" id="university">
      </td>

    </tr>
  </table>

  <br>

</body>

</html>

Possible duplicate of [Export to CSV using jQuery and html](http://stackoverflow.com/questions/16078544/export-to-csv-using-jquery-and-html) — Ani Menon, May 04 '16 at 05:34

Erick Boshoff · Answer 1 · 2016-05-04T06:22:51.127

1

This code will work when your data.txt file is one long string of comma-separated entries, with no newlines:

data.txt:

heading1,heading2,heading3,heading4,heading5,value1_1,...,value5_2

javascript:

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "data.txt",
        dataType: "text",
        success: function(data) {processData(data);}
     });
});

function processData(allText) {
    var record_num = 5;  // or however many elements there are in each row
    var allTextLines = allText.split(/\r\n|\n/);
    var entries = allTextLines[0].split(',');
    var lines = [];

    var headings = entries.splice(0,record_num);
    while (entries.length>0) {
        var tarr = [];
        for (var j=0; j<record_num; j++) {
            tarr.push(headings[j]+":"+entries.shift());
        }
        lines.push(tarr);
    }
    // alert(lines);
}

The following code will work on a "true" CSV file with linebreaks between each set of records:

data.txt:

heading1,heading2,heading3,heading4,heading5
value1_1,value2_1,value3_1,value4_1,value5_1
value1_2,value2_2,value3_2,value4_2,value5_2

javascript:

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "data.txt",
        dataType: "text",
        success: function(data) {processData(data);}
     });
});

function processData(allText) {
    var allTextLines = allText.split(/\r\n|\n/);
    var headers = allTextLines[0].split(',');
    var lines = [];

    for (var i=1; i<allTextLines.length; i++) {
        var data = allTextLines[i].split(',');
        if (data.length == headers.length) {

            var tarr = [];
            for (var j=0; j<headers.length; j++) {
                tarr.push(headers[j]+":"+data[j]);
            }
            lines.push(tarr);
        }
    }
    // alert(lines);
}

edited May 04 '16 at 06:22

answered May 04 '16 at 05:40

Erick Boshoff

1,443
2
18
30

Is it possible to save and retrieve using only javascript without help of the php???? – Sathish Aravind May 04 '16 at 05:49
Yes it is, here is a link to do that. You can use this if the browser doesn't support natively. https://github.com/eligrey/FileSaver.js – Erick Boshoff May 04 '16 at 05:57
Here is a link if you want to do it natively http://stackoverflow.com/questions/13405129/javascript-create-and-save-file – Erick Boshoff May 04 '16 at 06:03
function download(filename, name, contactnumber) { var pom = document.createElement('a'); pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(name)+ encodeURIComponent(' ')+ encodeURIComponent(contactnumber)); pom.setAttribute('download', filename); pom.style.display = 'none'; document.body.appendChild(pom); pom.click(); document.body.removeChild(pom); } I have used this code to save name and contact no which is text , but how to use this code to save table data ??? – Sathish Aravind May 04 '16 at 06:06
Is the table data generated or hard coded html ? Or is it input text ? – Erick Boshoff May 04 '16 at 06:09
But I dint get how to do it for table – Sathish Aravind May 04 '16 at 06:12
See updated code, ignore the ajax. If you get your data from the file save the data to an array the iterate over the data and append to your table like $("#idInputCol1").val(arr[0].value); If you want to save you can just iterate through the table rows, something like, $("#table").children("tr"); can be used in the iteration and the length property can be used on this to determine the entire iteration using the above code you can then get the value of each element and then save the data in the text file using the reverse of the function above. I hope this helps for you buddy. – Erick Boshoff May 04 '16 at 06:25

html form which has text and table now I want to save and retrieve the data in a simple text file how to achieve it?

1 Answers1