AutoSave

One element that I had to build recently was a auto-saver on a page editor.

As I thought this was a nifty little method in jQuery I built, I thought I’d share it.
This will take all fields in the form, wrap them up in an object and post them with an AJAX query to the url specified.

Full working HTML example available on GitHub:

https://github.com/glynrob/Autosave

I use jQuery for most javascript functions I am trying to do as it cuts out allot of the work for multiple browsers and writing clear code.

So to use jQuery on your site you add either use the jQuery library saved on your server or the Google hosted location.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script

So the first thing you need to do is to setup the timer to call a function after 60 seconds.

<script type="text/javascript">
<!--
var t;
$(document).ready(function() {
t = setTimeout("autosave()", 60000); // timer after 60 seconds
});

Now we create the function which will take the content of all fields inside the form ready for posting to your ajax call.
For elements that are an array you have to put a check in place to detect this. In my example I used the input array of “interests”.

You now replace the // AJAX CALL ADDED HERE with the following ajax code
This call will send all the content in the variable data to the URL you specify which can then save the content on the server side.
I used my ajax response as 1 – success, 2 – user timed out, and all other responses as fails.

Finally you can add your form to the HTML.
This is my example but it does not matter what form fields you have as they will all be posted to the ajax location you specify.
Not any array input values though as these are special cases – i.e. “interests” in my example.

Full working HTML example available on GitHub:

https://github.com/glynrob/Autosave

5 comments for “AutoSave

  1. Martin Burke
    January 7, 2012 at 1:12 pm

    Hah! Cheers Glyn. Doing something similar is on my job list for this weekend, so how pleased was I to see this, I think I had it theoretically nailed but I may steal some of this. I’m going to try and wrap it all up into a jQuery plugin though. So you can apply it to a form specifically and quickly (some of my pages have more than form). I’m thinking:

    $(“#myForm”).autoSave({
    ajaxScript:”ajax/save.php”,
    timeOut:60000
    });

    Or something similar.

  2. glyn.roberts
    January 7, 2012 at 4:25 pm

    Once you’ve built the plugin let us know the link and I’ll add it.
    Thanks

  3. Greg
    January 15, 2013 at 3:43 am

    Hi, Great work! Just one thing I don’t understand. Does the setTimeout function just reset the timer, or does it automatically fire the autosave function again in 60sec? Not quite getting my head around how this function loops and runs again.

  4. GlynRob
    January 23, 2013 at 6:25 pm

    setTimeout(“autosave()”, 60000);
    This means that it will run the autosave function in 60 seconds once.
    At that point, setTimeout has nothing else to do so dies.
    I then add setTimeout again to the success part of the autosave function so it runs this function again in another 60 seconds.

    Hope this helps

  5. July 16, 2014 at 3:36 pm

    Hey man, this was an awesome code snippet. I modified the id’s and a couple other things and it works like MAGIC!!! Thanks a TON… Definitely helping the community!

    -daniel

Leave a Reply

Your email address will not be published. Required fields are marked *