Motivation

Sample Program

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

IE Manual

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

This article is issued from Wikibooks. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.