Can I save input from form to txt in HTML using JAVASCRIPT jQuery and then use it

Question

Is it possible to save textinput  locally  from a form to a textfile  and then open that document to use it later on   Just using HTML  javascript and jQuery  No databases or php    W

User · Answer

This will work to both load and save a file into TXT from a HTML page with a save as choice   lt html gt   lt body gt    lt table gt       lt tr gt  lt td gt Text to Save  lt  td gt  lt  tr gt       lt tr gt           lt td colspan  3  gt               lt textarea id  inputTextToSave  cols  80  rows  25  gt  lt  textarea gt           lt  td gt       lt  tr gt       lt tr gt           lt td gt Filename to Save As  lt  td gt           lt td gt  lt input id  inputFileNameToSaveAs  gt  lt  input gt  lt  td gt           lt td gt  lt button onclick  saveTextAsFile    gt Save Text to File lt  button gt  lt  td gt       lt  tr gt       lt tr gt           lt td gt Select a File to Load  lt  td gt           lt td gt  lt input type  file  id  fileToLoad  gt  lt  td gt           lt td gt  lt button onclick  loadFileAsText    gt Load Selected File lt  button gt  lt td gt       lt  tr gt   lt  table gt    lt script type  text javascript  gt   function saveTextAsFile         var textToSave   document getElementById  inputTextToSave   value      var textToSaveAsBlob   new Blob  textToSave    type  text plain         var textToSaveAsURL   window URL createObjectURL textToSaveAsBlob       var fileNameToSaveAs   document getElementById  inputFileNameToSaveAs   value       var downloadLink   document createElement  a        downloadLink download   fileNameToSaveAs      downloadLink innerHTML    Download File       downloadLink href   textToSaveAsURL      downloadLink onclick   destroyClickedElement      downloadLink style display    none       document body appendChild downloadLink        downloadLink click       function destroyClickedElement event        document body removeChild event target      function loadFileAsText         var fileToLoad   document getElementById  fileToLoad   files 0        var fileReader   new FileReader        fileReader onload   function fileLoadedEvent                 var textFromFileLoaded   fileLoadedEvent target result          document getElementById  inputTextToSave   value   textFromFileLoaded             fileReader readAsText fileToLoad   UTF-8        lt  script gt    lt  body gt   lt  html gt

User · Answer

Answer is YES   lt html gt   lt head gt   lt  head gt   lt body gt   lt script language  javascript  gt  function WriteToFile     var fso   new ActiveXObject  Scripting FileSystemObject    var s   fso CreateTextFile  C   NewFile txt   true   var text document getElementById  TextArea1   innerText  s WriteLine text   s WriteLine                             s Close       lt  script gt    lt form name  abc  gt   lt textarea name  text  gt FIFA lt  textarea gt   lt button onclick  WriteToFile    gt Click to save lt  Button gt     lt  form gt     lt  body gt   lt  html gt

User · Answer

From what I understand  You have to save a user s input locally to a text file   Check this link  See if this helps   Saving user input to a text file locally

User · Answer

It s possible to save only if the user allow it to be saved just like a download and he must open it manually  the only issue is to suggest a name  my sample code will suggest a name only for Google Chome and only if you use a link instead of button because of the download attribute  You will only need a base64 encode library and JQuery to easy things   x000D   x000D     This will generate the text file content based on the form data function buildData      var txtData    Name        nameField   val            r nLast Name        lastNameField   val            r nGender         genderMale   is   checked    Male   Female       return txtData       This will be executed when the document is ready   function         This will act when the submit BUTTON is clicked       formToSave   submit function event       event preventDefault        var txtData   buildData        window location href  data application octet-stream base64   Base64 encode txtData               This will act when the submit LINK is clicked       submitLink   click function event       var txtData   buildData          this  attr  download   sugguestedName txt          attr  href   data application octet-stream base64   Base64 encode txtData              x000D   lt  DOCTYPE html gt   lt html gt       lt head gt  lt title gt  lt  title gt       lt script src  http   ajax googleapis com ajax libs jquery 1 8 3 jquery min js  gt  lt  script gt       lt script type  text javascript  src  base64 js  gt  lt  script gt       lt  head gt       lt body gt       lt form method  post  action    id  formToSave  gt           lt dl gt               lt dt gt Name  lt  dt gt               lt dd gt  lt input type  text  id  nameField  value  Sample    gt  lt  dd gt               lt dt gt Last Name  lt  dt gt               lt dd gt  lt input type  text  id  lastNameField  value  Last Name    gt  lt  dd gt               lt dt gt Gender  lt  dt gt               lt dd gt  lt input type  radio  checked  checked  name  gender  value  M  id  genderMale    gt                  Male                  lt input type  radio  checked  checked  name  gender  value  F    gt                  Female          lt  dl gt           lt p gt  lt a href  javascript   Save as TXT  id  submitLink  gt Save as TXT lt  a gt  lt  p gt           lt p gt  lt button type  submit  gt  lt img src  http   www suttonrunners org images save icon gif  alt     gt  Save as TXT lt  button gt  lt  p gt       lt  form gt       lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

Or this will work too the same way but without a save as choice    lt  DOCTYPE html gt   lt html gt   lt head gt     lt script type  text javascript  gt    lt   CDATA  window onload function     function      var textFile   null    makeTextFile   function  text        var data   new Blob  text    type   text plain             If we are replacing a previously generated file we need to        manually revoke the object URL to avoid memory leaks      if  textFile     null          window URL revokeObjectURL textFile              textFile   window URL createObjectURL data        return textFile           var create   document getElementById  create        textbox   document getElementById  textbox       create addEventListener  click   function          var link   document getElementById  downloadlink        link href   makeTextFile textbox value       link style display    block        false                gt     lt  script gt     lt  head gt    lt body gt     lt textarea id  textbox  gt Type something here lt  textarea gt   lt button id  create  gt Create file lt  button gt   lt a download  info txt  id  downloadlink  style  display  none  gt Download lt  a gt       lt script gt       tell the embed parent frame the height of the content   if  window parent  amp  amp  window parent parent       window parent parent postMessage   resultsFrame           height  document body getBoundingClientRect   height        slug   qm5AG                    lt  script gt    lt  body gt    lt  html gt

User · Answer

You can use localStorage to save the data for later use  but you can not save to a file using JavaScript  in the browser    To be comprehensive  You can not store something into a file using JavaScript in the Browser  but using HTML5  you can read files

User · Answer

You cannot save it as local file without using server side logic  But if that fits your needs  you could look at local storage of html5 or us a javascript plugin as jStorage

User · Answer

BEST solution if you ask me is this  This will save the file with the file name of your choice and automatically in HTML or in TXT at your choice with buttons  Example   x000D   x000D  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      function addTextHTML         document addtext name value   document addtext name value     html     function addTextTXT         document addtext name value   document addtext name value     txt    x000D   lt html gt     lt head gt  lt  head gt     lt body gt        lt form name  addtext  onsubmit  download this  name   value  this  text   value   gt        lt textarea rows  10  cols  70  name  text  placeholder  Type your text here   gt  lt  textarea gt       lt br gt       lt input type  text  name  name  value    placeholder  File Name  gt       lt input type  submit  onClick  addTextHTML     value  Save As HTML  gt       lt input type  submit  onClick  addTexttxt     value  Save As TXT  gt        lt  form gt     lt  body gt   lt  html gt  x000D   x000D   x000D

[javascript] Can I save input from form to .txt in HTML, using JAVASCRIPT/jQuery, and then use it?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to xhtml