Monitor Form Changes

All of us have e-forms in our apps, it is an effective tool for gathering information of and from the users. A user fills the e-form and saves the same. Many-a-times, we need to monitor if the user has modified the form contents after once saving the form.

Found a plugin that monitors form changes. Add the following code to .js file:

(function ($) {

  $.fn.watchChanges = function () {
    return this.each(function () {
      $.data(this, 'formHash', $(this).serialize());
    });
  };

  $.fn.hasChanged = function () {
    var hasChanged = true;

    this.each(function () {
      var formHash = $.data(this, 'formHash');

      if (formHash == $(this).serialize()) {
        hasChanged = false;
        return true;
      }
    });

    return hasChanged;
  };

}).call(this, jQuery);

Then, monitor the form for changes by:

Eg:

$('.simple_form').watchChanges()

Perform required steps, once the form has changed(or modified after it was saved once):

Eg:

if $('.simple_form').hasChanged()

  //do something

Check the link to the plugin [here(monitor form changes)][1]

Hope this helps :)
[1]: https://gist.github.com/DrPheltRight/4131266