Autosave a form without jquery or ajax

Question

I am looking to have an "autosave" feature on a system that is already established and I cant make very many/drastic changes to it. The form should autosave (aka submit itself) every time a change is made to one of the inputs. The way I have it now there is an onblur event bound to each input that submits the forms to processing.php which processes and redirects back to the form with the updated info.

This is fine and works well but loses the tab place and causes a "flash" from the reload. Is there a way I can autosave this form without the need for ajax or jquery? saving the variables to cookies and submitting the form when the person leaves the page? Or some other method?

can onunload be used outside of the body tag? its a sort "application" where the user logs in and top and left sides are loaded only once and all navigation and content display afterwards is iframes being switched out for one another. The body tag is loaded only once. — cwal, Jan 29 '13 at 20:10
objection of ajax is that it is a very complex system, and written quite some years ago, I do not feel like recoding everything to work for ajax — cwal, Jan 29 '13 at 20:10
@11684 onunload seems to work, as simple as that, regardless of whether the body tag is outside of the frame containing the form or not. If you submit as an answer I will glady accept it — cwal, Jan 29 '13 at 20:17

score 0 · Accepted Answer · answered Jan 29 '13 at 20:21

0

I would propose onunload, it does what you want, it gives an opportunity to call a JS function if the user leaves the page.

answered Jan 29 '13 at 20:21

11684

7,356
12
48
71

Ended up using onbeforeunload instead as it has the cance to process before leaving the window. Same concept though. – cwal Jan 30 '13 at 20:42
Haha, I actually doubted if I should mention it in my answer, but decided not to! @cwal – 11684 Jan 31 '13 at 07:07

score 0 · Answer 2 · answered Aug 12 '18 at 22:57

If you don't mind using AJAX for autosave, here is a version that does NOT use jQuery:

setInterval(function() {
    var form = document.getElementById('my-form-id');
    var request = new XMLHttpRequest();
    request.open(form.method, form.action);
    request.send(new FormData(form));
}, 10000);

If you want to send the form as x-www-form-urlencoded instead of multipart/form-data, see my answer here: Periodically autosave form.

Autosave a form without jquery or ajax

2 Answers2