Question

I’m adding a mechanism in my website that’s supposed to warn users whenever they are about to close a page they were working in. I’m binding a function dropDraftConfirmation to the window.onbeforeunload event, like this:

window.onbeforeunload = dropDraftConfirmation;

function dropDraftConfirmation()
{
    if (<there is an input or textarea element not empty on the page>) {
        alert('Your changes will be lost. Are you sure you want to exit the page?');
    }
}

But this is called every time I close a page. So my question is, how to detect if there is an input or textarea element in the page that is not empty? I’m using jQuery by the way.

Answer 1

I think this should do the trick.

window.onbeforeunload = dropDraftConfirmation;

function dropDraftConfirmation()
{
    if ($("input:empty,textarea:empty").length == 0) {
        alert('Your changes will be lost. Are you sure you want to exit the page?');
    }
}