Demo: Are You Sure? - a dirty forms jQuery Plugin

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

## Enter Your Coffee Order

Coffee
Shots
1 Shot - Standard
2 Shots - Morning wakeup!
3 Shots - Overdrive!
Sugar
Special Instructions
Remember my order

... or visit Google or close the window without saving!

## 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.

## Enter Your Coffee Order

Pickup Time
Coffee
Shots
1 Shot - Standard
2 Shots - Morning wakeup!
3 Shots - Overdrive!
Sugar
Special Instructions
Remember my order

... or visit Google or close the window without saving!

## 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).

## Update My Standard Order

Coffee
Shots
1 Shot - Standard
2 Shots - Morning wakeup!
3 Shots - Overdrive!
Sugar
Special Instructions No chocolate please

... or visit Google or close the window without saving!

## 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.

## Order Coffee For Pickup Now

Set my preferences from my last order
Coffee

... or visit Google or close the window without saving!

## 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).

## Update My Standard Order

Coffee
Shots
1 Shot - Standard
2 Shots - Morning wakeup!
3 Shots - Overdrive!
Do you like us?

... or visit Google or close the window without saving!

## 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 :-)

## Doing HTML5? You'll need coffee!

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
select/optgroup
multi select
plain old field

... or visit Google or close the window without saving!

## 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.

## Tell us your default coffee

Default coffee

... or visit Google or close the window without saving!

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.