jQuery addClass example

Change class name on click in jQuery

HTML

<label>check the console for - </label>
<ol>
  <li>Fill in some value</li>
  <li>Clear input value & your page will be refreshed in 5 seconds...</li>
</ol>
<br>
<form id="myform">
    <input type="text" value="" id="opinion" />
</form>

JavaScript

// jquery.formwatcher.js starts
(function($) {
    "use strict";

    var STATUS_DIRTY = 'dirty',
        STATUS_CLEAN = 'clean';

    var FormWatcher = function(element) {
        this.init(element);
    };

    FormWatcher.uniqueId = 0;

    FormWatcher.prototype.init = function(element) {
        this.$element = $(element);
        this.$inputs = $(element).find(':input');
        this.$updatedElements = [];
        this.status = STATUS_CLEAN;

        var that = this;
        this.$inputs.each(function() {
            var $this = $(this);
            $this.data('initial.formwatcher', that.getVal($this));
        });

        this.$inputs.on('change.formwatcher keyup.formwatcher', function() {
            that.checkChange($(this));
        });
    };

    FormWatcher.prototype.getVal = function(element) {
        if (element.is('[type="checkbox"],[type="radio"]')) {
            return element.is(':checked');
        }
        return element.val();
    };

    FormWatcher.prototype.checkChange = function(element) {
        if (this.getVal(element) !== element.data('initial.formwatcher')) {
            var id = element.data('uniqueId.formwatcher');
            if (typeof id === 'undefined') {
                element.data('uniqueId.formwatcher', (id=FormWatcher.uniqueId++));
            }
            if(this.$updatedElements.indexOf(id) === -1 ) {
                this.$updatedElements.push(id);
                this.$element.trigger('dirty.formwatcher');
                this.status = STATUS_DIRTY;
            }
        }
        else {
            var index = this.$updatedElements.indexOf(element.data('uniqueId.formwatcher'));
            if( index !== -1 ) {
                this.$updatedElements.pop(index);
                if(this.$updatedElements.length === 0) {
                    this.$element.trigger('clean.formwatcher');
                    this.status = STATUS_CLEAN;
                }
            }
        }
    };

    $.fn.formwatcher = function(option)...