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.
So the first thing you need to do is to setup the timer to call a function after 60 seconds.
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.