Input Monitoring

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()
Copyright © 2024 Winter CMS