Periodically autosave form

Question

How to implement a periodical save of a form in the background? Same kinda thing that gmail does.

On SO people like when you write some code that doesn't work and then everybody start to fix it :) Also it isn't about Ruby or Ruby on Rails — fl00r, Apr 27 '11 at 13:41
@krunal - I updated my answer with an example. Did that work for you? — McStretch, May 02 '11 at 20:17

Phrogz · Accepted Answer · 2011-04-27T13:58:49.813

19

setInterval(function(){
  var form = $('#my-form-id');
  var method = form.attr('method').toLowerCase();      // "get" or "post"
  var action = form.attr('action');                    // url to submit to
  $[method](action, form.serialize(), function(data){
    // Do something with the server response data      
    // Or at least let the user know it saved
  });
},10000);                                              // do it every 10 seconds

If you don't want to use the method of the form, but always want to use 'post', then use:

$.post(action, form.serialize(), ... );

And, if you want to supply your own action for the autosave that is different from the action for the actual save:

$.post("/autosave/comments", form.serialize(), ... );

edited Apr 27 '11 at 13:58

answered Apr 27 '11 at 13:23

Phrogz

296,393
112
651
745

1

-@Phrogz, can you explain in your 1st code block where form validation would go? – tim peterson Dec 01 '12 at 12:50
1

@timpeterson 3.5 years too late a response, but: I assume you are talking about client-side validation, and you don't want to submit the form if it's invalid? If so, then it's just code, right? `if (formIsValid(form)) $[method](...);` – Phrogz Jul 27 '16 at 16:52

McStretch · Answer 2 · 2011-04-27T13:24:44.960

You would need a timed loop on the client side that would save the form every x seconds/minutes. A crude way of doing this would be to have a setTimeout javascript function that collects the form's field values and updates the model via an update (PUT in Rails' case) AJAX request.

Example

Here's a crude way of doing it (i.e. there might be a better way):

// repeat every 10 seconds
var repeatTime = 10 * 1000; 

function updateModel(){
    // get field values (using jQuery, etc.)
    // make ajax request using these field values 
    //(make sure put parameters match model attribute names)
    console.log('updated');
    setTimeout(updateModel, repeatTime); // start call over again
}

setTimeout(updateModel, repeatTime);

I included the console.log so that you can test this out in Firebug right now and see that the updateModel executes every 10 seconds. I would recommend using jQuery to generate the PUT AJAX requests.

Can you provide any example ? – krunal shah Apr 27 '11 at 13:15 — krunal shah, Apr 27 '11 at 13:15
Why not use setInterval() instead of setTimeout()? – Sam Dutton Mar 06 '12 at 13:04 — Sam Dutton, Mar 06 '12 at 13:04

score 2 · Answer 3 · answered Mar 06 '12 at 13:07

Why not do this purely on the client, using a local database (or whatever)? That should reduce complexity, server load and bandwidth usage.

Permanent or per-session storage -- whatever's appropriate -- and you can save after every keystroke: no need for setTimeout().

score 1 · Answer 4 · answered May 16 '16 at 05:56

Sisyphus.js: Gmail-like client-side drafts and bit more. Plugin developed to save html forms data to LocalStorage to restore them after browser crashes, tabs closings and other disasters. http://sisyphus-js.herokuapp.com

Smashing Magazine article: http://coding.smashingmagazine.com/2011/12/05/sisyphus-js-client-side-drafts-and-more/

score 0 · Answer 5 · answered Aug 12 '18 at 22:49

Version that works without jquery:

function urlencodeFormData(fd) {
    var s = '';
    function encode(s) { return encodeURIComponent(s).replace(/%20/g,'+'); }
    for (var pair of fd.entries()) {
        if(typeof pair[1]=='string') {
            s += (s?'&':'') + encode(pair[0])+'='+encode(pair[1]);
        }
    }
    return s;
}

setInterval(function() {
    var form = document.getElementById('my-form-id');
    var request = new XMLHttpRequest();
    request.open(form.method, form.action);
    request.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
    request.send(urlencodeFormData(new FormData(form)));
}, 10000);

If you need to do something with the server response see this post: https://blog.garstasio.com/you-dont-need-jquery/ajax/#posting

Periodically autosave form

5 Answers5

Linked

Related