Export a Local Html form data to CSV using Javascript or VBscript

Question

I have created an HTML Form which will be used from a local computer and want the form data to be saved in CSV file.

Each time the form is submitted, it should add a line in the CSV file.

This needs to be run locally so cannot use PHP or JSP.

Any help or idea is appreciated.

Unless you circumwent (reasonable) security restrictions, a browser can't access the local file system. Unless your 'application' is strictly 'one user, single process', writing to a .csv is risky. So without more details about what you want to achieve, the answer is: Don't even try. — Ekkehard.Horner, Jul 07 '12 at 07:30
I want a sort of survey to be completed by a number of people and the results to be saved directly to a CSV file. Its a work computer, so cannot use excel forms or something like that. Any pointers to this are greatly appreciated. — Akash Bajaj, Jul 08 '12 at 03:07

score 1 · Answer 1 · answered Jul 08 '12 at 08:57

I assume this is an IE-only question (VBScript). If so, you can use ActiveXObject called FileSystemObject.

JavaScript:

csv=[]; // Collect form values to this array.

function saveFile(csv){
    var fso,oStream;
    fso=new ActiveXObject('Scripting.FileSystemObject');
    oStream=fso.OpenTextFile('absolute_file_path',8,true);
    oStream.WriteLine(csv.join(','));
    oStream.Close();
    return;
}

function readFile(path){
    var fso,iStream,n,csv=[];
    fso=new ActiveXObject('Scripting.FileSystemObject');
    iStream=fso.OpenTextFile(path,1,true);
    for(n=0;!iStream.AtEndOfStream;n++){
        csv[n]=iStream.ReadLine().split(',');
    }
    iStream.Close();
    return csv;
}

You can read more about FileSystemObject in MSDN.

score 0 · Answer 2 · answered Jul 07 '12 at 23:14

@Ekkehard.Horner is right in that a browser can't write directly to the local file system.

However, when submitting the form, it is certainly possible to update another part of the browser window provided that your browser is JavaScript enabled. You can then cut-and-paste the accumulated content in your browser to a file if that is your objective.

Here's a simple example I put together that illustrates this concept with just a little JavaScript and a few simple form elements:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Capture Form Fields to CSV</title>
<script type="text/javascript">
<!--
function saveValues() {
    var frm = document.form1;

    var record = ""
            +       frm.text1.value
            + "," + frm.text2.value
            + "," + frm.text3.value
            + "\n";

    frm.textarea1.value += record;
}

function clearText() {
    document.form1.textarea1.value = "";
}
//-->
</script>
</head>
<body>
<h1>Capture Form Fields to CSV</h1>

<form name="form1" action="javascript:null">
  <p>
    F1: <input name="text1" type="text" value="field1" /><br />
    F2: <input name="text2" type="text" value="field2"/><br />
    F3: <input name="text3" type="text" value="field3"/>
  </p>
  <p>
    <input name="save" type="button" value="Save"
           onclick="saveValues(); return false"/>
    &#0160;
    <input name="clear" type="button" value="Clear"
           onclick="clearText(); return false"/>
  </p>
  <p>
    <i>Click 'Save' to add content</i><br />
    <textarea name="textarea1" rows="5" cols="40"></textarea>
  </p>
</form>

</body>
</html>

You can certainly get much fancier than this if you are willing to dive into DHTML with a JavaScript library such as jQuery. Just consider the fantastic editing mode provided by this very site!

Thanks a lot David. This certainly helps, however the objective is to gather the information provided in a CSV file directly. This needs to be for multiple users to access it at a time. Can anything be done so that multiple users can access and save it at a time. It needs to be done on a normal browser with not much of Addons. JavaScript is enabled. — Akash Bajaj, Jul 08 '12 at 03:05
Hmmm, a very unusual request! @Teemu has given you a possible way forward with MSIE and the `FileSystemObject`. Of course, you'll need to put the CSV file on the network. And because this is a multiuser situation, you'll need to create a lock so a user can gain temporary exclusive write access to the CSV file. `CreateFolder()` is atomic so you can wrap a lock routine around it. See my post [here](http://stackoverflow.com/a/11371416/1497596) for a pointer to downloading Microsoft's complete WSH/VBScript reference as a Windows help file. — DavidRR, Jul 09 '12 at 23:58
@DavidRR Thanks for a very interesting link (script56.chm). Now I don't have to surf around MSDN with my slow connection... — Teemu, Jul 10 '12 at 11:13

score 0 · Answer 3 · answered Mar 05 '14 at 18:19

Old question, but I wanted to update with a good solid response:

Another way would be to use an emulator on the machine that will be running the script. This way you could build the form handling script in the same way that you would if it was hosted on a server. Check out WAMP (or MAMP for Mac), which will create a self contained running instance of Apache with PHP/MySQL on your system. Then you simply place the site's files into the directory either emulator specifies (usually 'www' or 'htdocs') and then you can run it via your browser locally as if it was directly on the server with PHP/MySQL.

Export a Local Html form data to CSV using Javascript or VBscript

3 Answers3