XForms/Warn on Navigate Away

Preventing Form Data Loss When User Navigate Away from Unsaved Data

Add this code to global.js

<script type="text/javascript">
        // adding a gmail style function to stop the user from moving away from the page..
        function unloadMessage(){message = "This form has not yet been submitted to the database\nAll data will be lost."
         return message;}
        function setBunload(on){window.onbeforeunload = (on) ? unloadMessage : null;}
        setBunload(true);
</script>

Mozilla Page [1]

IE Manual [2]

Discussion

Use the xf:load action in combination with an xforms-value-changed event to call a "dirty" function containing setBunload(true).

Likewise, use the load action within the submission to call a "clean" function containing "setBunload(false)".

function dirty() {
    setBunload(true);
}
function clean() {
    setBunload(false);
}
This one goes in your "submission" element:
<xf:load resource="javascript:clean()" ev:event="xforms-submit-done"/>

and this 
<xf:load resource="javascript:dirty()" ev:event="xforms-value-changed"/>
goes somewhere in the form  - place it at the body-level to capture all change events, or nest it within a more appropriate container.

References

This example was taken from Alex Bleasdale in 2007.

Microsoft documentation on page unload function