Writing html form data to a txt file without the use of a webserver

Question

I was wondering if there is a way to submit/write html form data to a txt file with the use of scripts but with out using a webserver, webhost, wamp, xamp etc.

I have been trying with php scripts but they just open the php document on submitting.

Any help is appreciated :D

possible duplicate of http://stackoverflow.com/questions/6051143/how-to-use-html-forms-without-a-server. I don't believe you can do this, but if you need help installing a web server, you can post a query about that as well — tay10r, Jun 01 '13 at 08:56
possible duplicate of [How to read and write into file using JavaScript](http://stackoverflow.com/questions/585234/how-to-read-and-write-into-file-using-javascript) — Tim M., Jun 01 '13 at 09:04
Something I missed out in my answer: You can use [cookies](http://www.w3schools.com/js/js_cookies.asp) to store data on a computer — imulsion, Jun 02 '13 at 08:10

score 17 · Answer 1 · answered Mar 31 '15 at 19:04

Something like this?

<!DOCTYPE html>
<html>
<head>
<style>
form * {
  display: block;
  margin: 10px;
}
</style>
<script language="Javascript" >
function download(filename, text) {
  var pom = document.createElement('a');
  pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + 

encodeURIComponent(text));
  pom.setAttribute('download', filename);

  pom.style.display = 'none';
  document.body.appendChild(pom);

  pom.click();

  document.body.removeChild(pom);
}
</script>
</head>
<body>

<form onsubmit="download(this['name'].value, this['text'].value)">
  <input type="text" name="name" value="test.txt">
  <textarea rows=3 cols=50 name="text">Please type in this box. When you 

click the Download button, the contents of this box will be downloaded to 

your machine at the location you specify. Pretty nifty. </textarea>
  <input type="submit" value="Download">
</form>
</body>
</html>

This worked perfectly well for me and saved me a lot of time. (with minor changes). Thanks for posting. — rh4games, Apr 09 '17 at 02:32

imulsion · Accepted Answer · 2019-10-11T20:11:07.827

14

You can use JavaScript:

<script type ="text/javascript">
 function WriteToFile(passForm) {

    set fso = CreateObject("Scripting.FileSystemObject");  
    set s = fso.CreateTextFile("C:\test.txt", True);
    s.writeline(document.passForm.input1.value);
    s.writeline(document.passForm.input2.value);
    s.writeline(document.passForm.input3.value);
    s.Close();
 }
  </script>

If this does not work, an alternative is the ActiveX object:

<script type = "text/javascript">
function WriteToFile(passForm)
{
var fso = new ActiveXObject("Scripting.FileSystemObject");
var s = fso.CreateTextFile("C:\\Test.txt", true);
s.WriteLine(document.passForm.input.value);
s.Close();
}
</script>

Unfortunately, the ActiveX object, to my knowledge, is only supported in IE.

edited Oct 11 '19 at 20:11

answered Jun 01 '13 at 08:56

imulsion

8,820
20
54
84

Great answer. Out of curiosity, is this cross-browser compatible? – tay10r Jun 01 '13 at 09:00
@TaylorFlores I believe so, mostly because this works with older versions of JavaScript as well. I think it should generally work. – imulsion Jun 01 '13 at 09:01
Your first example looks like old ASP JScript (server-side). The second example will only work in extremely limited cases, namely Internet Explorer with high permissions granted (if that even still works; I know it worked back in the IE 5-6 days). If such code could run untrusted, it would be a huge security hole. – Tim M. Jun 01 '13 at 09:06
@TimMedora the second one it only works in IE (as I explained) because ActiveX is only supported in IE. To my knowledge, these are the only ways to do it with JScript – imulsion Jun 01 '13 at 09:08
Understood, I was just pointing out that in most cases this won't work (contrary to your earlier comment that "it should generally work") because 1) the first sample will probably only work on the server-side 2) IE-only restriction and 3) (most importantly) security. – Tim M. Jun 01 '13 at 09:11
2

@TimMedora fair enough, I thought it did work. Thank you for pointing out the errors :) – imulsion Jun 01 '13 at 09:14
@imulsion is there a way to use the current directory instead of a specified file path? – user2130844 Jun 01 '13 at 12:23
You could try just the file rather than the path, it should write in the directory you are currently in. – imulsion Jun 01 '13 at 12:24

score 1 · Answer 3 · answered Jul 11 '16 at 06:46

i made a little change to this code to save entry of a radio button but unable to save the text which appears in text box after selecting the radio button.

the code is below:-

    <!DOCTYPE html>
<html>
<head>
<style>
form * {
  display: block;
  margin: 10px;
}
</style>
<script language="Javascript" >
function download(filename, text) {
  var pom = document.createElement('a');
  pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + 

encodeURIComponent(text));
  pom.setAttribute('download', filename);

  pom.style.display = 'none';
  document.body.appendChild(pom);

  pom.click();

  document.body.removeChild(pom);
}
</script>
</head>
<body>

<form onsubmit="download(this['name'].value, this['text'].value)">
  <input type="text" name="name" value="test.txt">
  <textarea rows=3 cols=50 name="text">PLEASE WRITE ANSWER HERE. </textarea>
<input type="radio" name="radio" value="Option 1" onclick="getElementById('problem').value=this.value;"> Option 1<br>
<input type="radio" name="radio" value="Option 2" onclick="getElementById('problem').value=this.value;"> Option 2<br>
<form onsubmit="download(this['name'].value, this['text'].value)">
<input type="text" name="problem" id="problem">
  <input type="submit" value="SAVE">
</form>
</body>
</html>

score 1 · Answer 4 · answered Jan 29 '21 at 23:56

I know this is old, but it's the first example of saving form data to a txt file I found in a quick search. So I've made a couple edits to the above code that makes it work more smoothly. It's now easier to add more fields, including the radio button as @user6573234 requested.

https://jsfiddle.net/cgeiser/m0j7Lwyt/1/

<!DOCTYPE html>
<html>
<head>
<style>
form * {
  display: block;
  margin: 10px;
}
</style>
<script language="Javascript" >
function download() {
  var filename = window.document.myform.docname.value;
  var name =  window.document.myform.name.value;
  var text =  window.document.myform.text.value;
  var problem =  window.document.myform.problem.value;
  
  var pom = document.createElement('a');
  pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + 
    "Your Name: " + encodeURIComponent(name) + "\n\n" +
    "Problem: " + encodeURIComponent(problem) + "\n\n" +
    encodeURIComponent(text)); 

  pom.setAttribute('download', filename);

  pom.style.display = 'none';
  document.body.appendChild(pom);

  pom.click();

  document.body.removeChild(pom);
}
</script>
</head>
<body>
<form name="myform" method="post" >
  <input type="text" id="docname" value="test.txt" />
  <input type="text" id="name" placeholder="Your Name" />
  <div style="display:unblock">
    Option 1 <input type="radio" value="Option 1" onclick="getElementById('problem').value=this.value; getElementById('problem').show()" style="display:inline" />
    Option 2 <input type="radio" value="Option 2" onclick="getElementById('problem').value=this.value;" style="display:inline" />
    <input type="text" id="problem" />
  </div>
  <textarea rows=3 cols=50 id="text" />Please type in this box. 
When you click the Download button, the contents of this box will be downloaded to your machine at the location you specify. Pretty nifty. </textarea>
  
  <input id="download_btn" type="submit" class="btn" style="width: 125px" onClick="download();" />
  
</form>
</body>
</html>

Writing html form data to a txt file without the use of a webserver

4 Answers4

Linked