jQuery Plugin Demo: Are You Sure?

This page hosts a demo of the jQuery Are-You-Sure plugin (jquery.are-you-sure.js).

Are-you-sure is simple light-weight "dirty forms" JQuery Plugin for modern browsers. It helps prevent users from loosing unsaved form changes.

Features:

• Light weight - only the features you need!
• Dependency free.
• Correct state management - if a user edits then restores a value, the form is not considered dirty.
• Easy to understand - less than a "terminal screen" of code!
• ... and more.

Example 1: It's simple!

This example shows how easy it is to add a dirty check to your form(s) with one line of code. (View the page's source)

Example 2: Ignore the unimportant!

This example highlights how to disregard a field from the dirty check. In this form the first field is dynamically populated and hence a change on this field should not mark the form as dirty.

Example 3: Lets be intelligent!

This is a more advanced example. The dirty and clean change events are intercepted so the save button is only enabled if the form is dirty (i.e. something to save). It also demonstrates how to customize the warning message and change the style of a dirty form (CSS styling using the .dirty class).

Example 4: Lets be dynamic!

In this example we'll dymaically add a field and fire off the rescan event. After the rescan, Are-You-Sure will start looking for changes on the new fields as well.

Example 5: Edge cases

This example demonstrates tracking of hidden and disabled form elements that are changed by non-input elements. E.g.:

• clicking a link or non-input button that changes the value of a hidden form field, or
• clicking a link or non-input button that enables or disables some form fields (which has an effect on whether or not those fields will be submitted with the form, despite the values not changing).

Example 6: HTML5 inputs!

This example shows support for HTML5 input types. It's not a coffee order form, but you need coffee if you're working with HTML5 :-)

Example 7: Mark current state as not dirty!

This example shows how you can mark the current state as not dirty. Handy for AJAX forms we're you're managing your own submits.

This jQuery plugin is developed by Chris Dance at PaperCut Software - Are-You-Sure is used in PaperCut's printing management software and it has been open sourced with help of Tom, Jack and Matt from PaperCut's dev team.