JSFiddle - React, Tailwind, and code Playground

by mehmetatas

HTML

<input id="txt" type="text" value="value1 test" /><br />
Chk1: <input id="chk1" type="checkbox" value="1" checked="true" />&nbsp;&nbsp;&nbsp;&nbsp;
Chk2: <input id="chk2" type="checkbox" value="2" />&nbsp;&nbsp;&nbsp;&nbsp;
Chk4: <input id="chk3" type="CHECKBOX" value="4" />
<br />
Rdb1: <input id="rdb1" type="RADIO" name="grp1" value="1" />&nbsp;&nbsp;&nbsp;&nbsp;
Rdb2: <input id="rdb2" type="RADIO" name="grp1" value="2" checked="true" />&nbsp;&nbsp;&nbsp;&nbsp;
Rdb4: <input id="rdb3" type="radio" name="grp1" value="4" />
<br />
<select id="ss">
    <option value="1">Option 1</option>
    <option value="2" selected="selected">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select><br />
<textarea id="tt" rows="4" cols="40">value2</textarea><br />
<br />
<input type="button" value="Check Values" onclick="checkValues();" />
<input type="button" value="Set Value" onclick="setValue();" />
<input type="button" value="Add Text Box" onclick="addTextBox();" />
<br />

JavaScript

var PageValues = new Array();
var ExcludedInputIds = ['hidBaseClickedImageKey'];

$(function() {
    tracePageValueChanges();
});

function isBeingTraced(id) {
    return typeof (PageValues[id]) !== 'undefined';
}

function isExcluded(id) {
    return $.inArray(id, ExcludedInputIds) > -1;
}

function isTraceable(obj) {
    return typeof (obj.id) !== 'undefined' && obj.id !== null && obj.id !== '' && !isExcluded(obj.id);
}

function getTraceValue(obj) {
    if (typeof (obj.type) !== 'undefined' && (
        obj.type.toString().toLowerCase() == 'radio' ||
        obj.type.toString().toLowerCase() == 'checkbox')) {
        return obj.checked;
    }
    return obj.value;
}

function tracePageValueChanges() {
    // Trace on change
    $('input,textarea,select').live('change', function(event) {
        if (isTraceable(this)) {
            PageValues[this.id] !== getTraceValue(this);
        }
    });

    // Begin tracing on document.ready
    $('input,textarea,select').each(function() {
        if (isTraceable(this) && !isBeingTraced(this.id)) {
            PageValues[this.id] = getTraceValue(this);
        }
    });

    // < IE 9 does not support DOMSubtreeModified
    $(document.body).bind('DOMSubtreeModified', function() {
        $('input,textarea,select').each(function() {
            if (isTraceable(this) && !isBeingTraced(this.id)) {
                PageValues[this.id] = getTraceValue(this);
            }
        });
    });
}

function isPageValueChanged() {
    var pageValueChanged = false;
    $('input,textarea,select').each(function() {
        if (isTraceable(this) && isBeingTraced(this.id)) {
            pageValueChanged = pageValueChanged || PageValues[this.id] !== getTraceValue(this);
        }
    });
    return pageValueChanged;
}

/************************ DEMO ***************************/

function checkValues() {
    alert(isPageValueChanged()? "Changed" : "Not Changed");
}

function setValue() {
    document.getElementById('txt').value += '...