This will monitor the user input for unsaved changes and show a confirmation box if the user attempts to leave the page. The script adds the "oc-data-changed" class to the form element when the form data is changed.

<form
    data-change-monitor
    data-window-close-confirm="There is unsaved data"
>
    ...
</form>

Example

Click the "Mark changed" button and "Reload page".

<form
    data-window-close-confirm="There is unsaved data"
    data-change-monitor>

    <button type="button" onclick="$(this).trigger('change')">
        Mark changed
    </button>

    <button type="button" onclick="$(this).trigger('unchange.oc.changeMonitor')">
        Mark saved
    </button>

    <hr />

    <button type="button" onclick="window.location.reload()">
        Reload page
    </button>

</form>

Supported data attributes

• data-change-monitor - enables the plugin form a form
• data-window-close-confirm - confirmation message to show when a browser window is closing and there is unsaved data

Supported events

• change - marks the form data as "changed". The event can be triggered on any element within a form or on a form itself.
• unchange.oc.changeMonitor - marks the form data as "unchanged". The event can be triggered on any element within a form or on a form itself.
• pause.oc.changeMonitor - temporary pauses the change monitoring. The event can be triggered on any element within a form or on a form itself.
• resume.oc.changeMonitor - resumes the change monitoring. The event can be triggered on any element within a form or on a form itself.

Triggered events

• changed.oc.changeMonitor - triggered when the form data changes.
• unchanged.oc.changeMonitor - triggered when the form data unchanges.
• ready.oc.changeMonitor triggered when the change monitor instance finishes initialization.

JavaScript API

$('#form').changeMonitor()