Have you ever been on a website and filled out a form, only to accidentally refreshed or left the page without having saved your data. This can be a horrible experience to your users and they may leave your site without ever proceeding forward. Luckily, with a few sprinkles of some javascript, we can remedy this issue.

To get started, we'll create a new rails application and a user scaffold.

rails new form-check-modified 
cd form-check-modified 
rails g scaffold user first_name last_name email 
rake db:migrate

We can then rename the app/assets/javascripts/users.coffee to users.js

Paste in the following into this file.

var msg, unsaved;

msg = "Changes you made may not be saved.";

unsaved = false;

$(document).on('change', 'form[role="check-modified"]:not([data-remote]) :input', function() {
  return unsaved = true;
});

$(document).on('turbolinks:load', function() {
  return unsaved = false;
});

$(document).on('submit', 'form[role="check-modified"]', function() {
  unsaved = false;
});

$(window).bind('beforeunload', function() {
  if (unsaved) {
    return msg;
  }
});

$(document).on('turbolinks:before-visit', function(event) {
  if (unsaved && !confirm(msg)) {
    return event.preventDefault();
  }
});

Notice that we are selecting the form via `form[role="check-modified"]` which means that we will need to modify our user's form to include this role. This is a good way to prevent unwanted alerts on your application for things like search forms or other forms that will automatically save when fields are changed.

In our user's form, we can add html: { role: 'check-modified' } which will trigger the javascript to check our forms for any unsaved changes.

<%= form_for user, html: { role: 'check-modified' } do |f| %> 
  ... 
<% end %>

Now, once we refresh our page, whenever we modify the form and try to leave without saving, we get an alert!