javascript - How to export html form to csv file

Question

I am trying to create a form that a user can enter data into and then when they click submit, that data will be added as a new row to a csv file stored on the server which I can then download. I have tried both some php stuff and javascript, both of which seem to be good, but I am not very experienced in either.

Here is basicaly the html form:

<form name="xyz_form">
    <section class="border-bottom">
<div class="content">
    <h3>ID Number</h3>
    <div class="form-control-group">
        <div class="form-control form-control-number">
            <input type="number" id="id_number">
        </div>
    </div>
            <h3>First Name</h3>
    <div class="form-control-group">
        <div class="form-control form-control-text">
            <input type="text" id="first_name">
        </div>
    </div>
</div><!--.content-->
    <section class="data-capture-buttons one-buttons">
       <div class="content">
          <input type="submit" value="Submit" onClick="javascript:addToCSVFile()">
       </div>
    </section><!--.data-capture-buttons-->

The Javascript is in the header of the html file and it is:

<script type="text/javascript">
        function addToCSVFile() {
            var csvData = new Array();  // To collect the names
            var csvFilePath = "Data.csv"; // File name

            // Collect General Information
            csvData[0] = document.getElementById('id_number').value;
            csvData[1] = document.getElementById('first_name').value;

              var fso = new ActiveXObject('Scripting.FileSystemObject');
            var oStream = fso.OpenTextFile(csvFilePath, 8, true, 0);
            oStream.WriteLine(csvData.join(','));
            oStream.Close();
            clearData();
            alert("Data Added Successfully");
     }

     function clearData() {
            document.getElementById('id_number').value = "";
            document.getElementById('first_name').value = "";
                     }
    </script>

And right now I have the onClick="javascript:addToCSVFile()"> but it also doesn't work when I set the form action to the handler.php file and the mothod to post and remove the onlick. This is the php file.

   <?
    if(isset($_POST['match_scouting'])){
       $del = "";
     //Collect Info
     $data[1] = $_POST['id_number'];
     $data[2] = $_POST['first_name'];
    $file = fopen("Data.csv", "a");
    $data = "
".implode($del, $data);
    fwrite($file, $data);
    fclose($file);
    echo "The data has been added successfully";
 }else{
   header("location: form.html");
 }
 ?> 

If I am doing this wrong, could you point me in a different direction? What I am ultimately trying to do however is save the form data somehow and I thought this would be easier then setting up an SQL Database since I have never done that before.

Answer 1

For this you do not need to apply any javascript code. Just add an action to your form

<form name="xyz_form" action="proces.php" method="get">

submit will now redirect you to that php file. that php file should contain this:

<?php
    $keys = array('id_number','first_name');
    $csv_line = array();
    foreach($keys as $key){
        array_push($csv_line,'' . $_GET[$key]);
    }
    $fname = 'file_to_write_to.csv';
    $csv_line = implode(',',$csv_line);
    if(!file_exists($fname)){$csv_line = "
" . $csv_line;}
    $fcon = fopen($fname,'a');
    $fcontent = $csv_line;
    fwrite($fcon,$csv_line);
    fclose($fcon);
?>

$Keys is all the names of the input fields you have, and you can add as many as you'd like. $fname is the name of the file you want to write to. The csv file gets added new lines when the form is submitted.

You could look after this: Write a text file and force to download with php. If you want to force download the file. You can also look into this for a redirect instead of download: How to make a redirect in PHP?. You could also add:

echo file_get_contents($fname);

to your PHP