How to show an alert message when no form field is used in 30 minutes using javascript/jquery?

Question

I have a form with couple of input fields and i want a script that will show a pop up message IF no field is used after a certain time-frame, asking "Are you still there?" or something like that.

Is it possible? Please advice, thanks!

Answer 1

You'll want to start a timer for thirty minutes and attach a change event to all of your fields. On change, you want to erase the current timer, and create a new one for another 30 minutes.

For example, it would be something like this:

$('input[type=text]').bind('change', function (e) {
    // .. Triggered every time a form text field is changed
    // .. Do stuff here
});

And for the timer, you'd just use settimeout

Answer 2

Here is full sample in JsFiddle:

• http://jsfiddle.net/Zsjtn/

What I recommend is using setTimeOut to call a method that you want to display a message or do whatever action you wanted to do. Then on change event on all your input types try to reset the TimeOut. Here is JS Code that simulates this scenario:

// Timer for 3 seconds to call formTimeOut function 
var _timer = setTimeout("formTimeOut()",3000);

$(function(){

    // Monitor Value change of Inputs in your HTML
    $("input").change(function(){

        // Clear previous timer 
        clearTimeout(_timer);
        // Reset the timer to re-run after 3 seconds.
        _timer = setTimeout("formTimeOut()",3000);

    });
});

// This is the function that will run after time out
function formTimeOut(){

    // Timeout Logic goes here
    alert("Are you there?");
}

You can change $("input") to any criteria that may fit your project.