Autosave HTML text area
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

What I want.

I want to be able to autosave a text area after every x minutes and after each time someone edits and stops typing (kinda like Google docs).

Clarification

I want an HTML/PHP file that (when edited, when a button is pressed, and/or on a timed basis) will save it's <textarea> contents to a file named backup.txt using Ajax/PHP. I want to be able to set the interval in which the document saves.

Requirements/Stuff I want the script to have

  • ONLY use HTML, PHP, JavaScript, and/or jQuery
  • external JS, please no integrated JS
  • I want a PHP file, to save the data to the text file
  • I want a JS file, for the JS/jQuery
  • and I want a HTML/PHP file that has the <textarea> and a save button

Bonuse(s)

  • extra $1 tip if you could integrate CodeMirror. If you choose to implement this, you can place the CodeMirror files in a separate directory or other files.

Thanks.

This would require websockets unless a polling solution is implemented. Websockets can be implemented using a service like Pusher.
bevan almost 7 years ago
Luckily, www.pusher.com is free (at first) and easy to set up.
bevan almost 7 years ago
Is this in anyway related to collaborative editing? If not (if it's for just a single user at a time, eg: autosave) you will not need websockets.
blackpla9ue almost 7 years ago
It was, but I kinda redid my question, because two people editing one file would to be a mess. My original goal was basically a file editor via PHP/JS.
alex almost 7 years ago
awarded to blackpla9ue

Crowdsource coding tasks.

2 Solutions


Download the files here - 420.st/code/autosave/autosave.zip

$('#description').autosave({
delay: 1000,
url: 'save.php',
beforeSave : function() { },
afterSave : function() { }
});

beforeSave and afterSave are optional and can be used to show and hide a loader when a ajax request is processing :)

Note: you will always need to give an id to your textarea

For a sample check - http://420.st/code/autosave/
Use http://420.st/code/autosave/backup.txt to check for the result

IF you need any changes done to the code just let me know


muje html ka aisa code chahe kay may mozila firefox par jo text area may likho who ato ek text file may save hota rahe

View Timeline