Hi Blake. Coincidentally I was looking for the same feature right now, as many of our customers are timing out. It makes sense that if the customer is typing a long form, that eventually he/she might need to step out or pick up a phone call, or something. In our case we can't divide the form into sections right now so, in lack of finding a feasible solution for us, I put together a simple one from different other projects, that I had worked on before.
The script will not time out, unless there is no activity in the form. I have it set to 3 seconds so you can test it, but adjust as needed.
Upon the form reaching its timeout time, it will display an alert as the image attached. Then it will wait for 20 seconds and auto-save. I couldn't make the alert work in IE so the form will simply save without notice; which is no big deal. I had another version where the form saves automatically, regardless of there been activity or not, but decided to go with the version below.
I hope someone else finds it useful and can improve it further.
You would need to activate the "Save as Draft" feature in the Process Diagram of course. I also added this CSS in the CSS Section, to make the title stand out in red.
.modal-title {
color: red;
}
function myFunction() {
var ms_ie = false;
var ua = window.navigator.userAgent;
var old_ie = ua.indexOf('MSIE ');
var new_ie = ua.indexOf('Trident/');
if ((old_ie > -1) || (new_ie > -1)) {
ms_ie = true;
}
if ( ms_ie ) {
$(this).parents(".draft-btn").click();
//IE specific code goes here
}
else
{
$(".draft-btn").click();
}
//$(this).parents(".draft-btn").click();
//$(".draft-btn").click();
$('.modal-title').html("You have been too long in this form. Your form will be auto-saved in 20 seconds in order to avoid losing all your data. Click \"Save\" to save now.");
setTimeout(function(){
$('.btn-primary').click(); // uncomment to bypass the alert and force Save
}, 20000); //20 seconds, for testing purposes
}
function listener() {
//10000 is 10 seconds
//window.time = 300000, // 5 minutes
window.time = 3000, // 3 seconds, for testing purposes, use line above for 5 minutes or adjust
delta = 100,
window.tid = setInterval(function() {
window.time -= delta;
console.log(window.time);
if ( time <= 0 ) {
clearInterval(window.tid);
myFunction(); // time passed
}
}, delta);
};
listener();
$(document).on('keyup keypress blur change mousemove',function(){
clearInterval(window.tid);
listener();
});
