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()

Keep informed

Sign up to our newsletter to receive updates on Winter CMS releases, new features in the works, and much more.
We'll never spam or give this address away.

Latest blog post

The Winter CMS Web Installer is now available!

Published June 17, 2021
We are super excited to announce that our new Web-based Installer is finally available for download, to make it super easy to get your next Winter CMS project started!

View this post Read all posts

Latest Winter CMS release

v1.1.3

Released April 26, 2021
3 UX/UI Improvements, 19 API Changes, 23 Bug Fixes, 3 Security Improvements, 4 Translation Improvements, 1 Community Improvement, 2 Dependencies

View details View all releases