Question

I’m designing a rather long form that will auto-save every couple minutes (i.e., using Ajax, the form data will be inserted or updated into the MySQL database). However, if the user decides to exit the page before submitting the form, I want to make sure I delete the row that was inserted into the database. This is easily do-able if the user simply clicks another link or the form’s Cancel button. But I’m concerned about what happens when the user: 1) closes the page, 2) reloads the page, or 3) hits the browser’s back (or forward) button. I know how to use the unload event to create a confirmation dialog asking the user to confirm they want to leave the page. But what I don’t know is how to make an Ajax call (to delete that row from the database) if the user clicks OK (“Press OK to Continue”). Is there any way to call a function if a user clicks the OK button during the unload event?

window.onbeforeunload = function() {
    if ($('#changes_made').val() == 'yes') //if user (partially) filled out the form
        {
            return "Are you sure?"
            if (/*user clicks OK */)  //What should the if statement evaluate here?
            {
                //make Ajax call
            }
        }
};

Answer 1

$(document).ready(function() {   
    $(':input',document.myForm).bind("change", function() { 
       setConfirmUnload(true); 
    }); // Prevent accidental navigation away
});

function setConfirmUnload(on) {
     // To avoid IE7 and prior jQuery version issues   
     // we are directly using window.onbeforeunload event
     window.onbeforeunload = (on) ? unloadMessage : null;
}

function unloadMessage() {

    if(Confirm('You have entered new data on this page.  If you navigate away from this page without first saving your data, the changes will be lost.')) {

            $.ajax({
               type: "POST",
               url: "some.php",
               data: "name=John&location=Boston",
               success: function(msg){
                 alert( "Data Saved: " + msg );
               }
             });

    }

}

Make sure you have upgraded version of jQuery. jQuery version 1.3.2 had a bug:

Ticket #4418: beforeunload doenst work correctly

Or use native function:

window.onbeforeunload = function() {....}