Undo with Data Attributes

Using Data Attributes and Jquery to track changes

by db_dev

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
    <div class="card">
        <div class="card-body">
            <form id="simpleForm">
                <span id="flagBadge" class="badge badge-info"></span>
                <span id="timeBadge" class="badge badge-info"></span>
                <div class="form-group">
                    <label for="Email1">Email address</label>
                    <input type="email" class="simpleForm form-control form-control-sm" value="[email protected]" data-server="" data-new="" id="Email1" aria-describedby="emailHelp" />
                    <small class="form-text text-muted">Some details on what this input is for.</small>
                </div>
                <div class="form-group">
                    <label for="Password1">Password</label>
                    <input type="password" class="simpleForm form-control form-control-sm" value="My Password" data-server="" data-new="" id="Password1">
                </div>
                <div class="form-group">
                    <label for="Select1">Single Select</label>
                    <select class="simpleForm form-control" data-server="" data-new="" id="Select1">
                        <option>1</option>
                        <option selected="selected">2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </div>
                <!--<div class="form-group">
                    <label for="Select2">Multiple...

SCSS

.simpleForm {
    position: relative;
    outline-offset: 4px;
    outline-style: dashed;
    outline-width: 2px;
	outline-color: #eeeeee;
   /* &:not([data-new=""]) {
        outline-color: pink;
    }*/
	
}
.changedField {
		outline-color: pink;
	}

JavaScript

var somethingChanged = false;


/*
	Goal is to track changes by comparing 2 data attributes
	
	

	
	// Upon Undo, foreach the entire simpleForm class and remove values from changed data attribute
	// Upon Save, the changed values become the current and the changed data attributes are set to undefined
	
	// Later:
		// Multple select. On change doesn't work because it's an array. 
		// Checkbox
*/


//On load, out the value into the serverValue data
function serverToData() {
    $(".simpleForm").each(function(index) {
        switch (this.type) {}
        var serverVal = $(this).val();
        $(this).attr("data-server", serverVal);
    });
}

function toTimestamp(e) {
    var datum = new Date;
    $("#timeBadge").text("Last Change: " + datum.toLocaleString());
}

function anyChanged() {
    var counter = 0;
    /*$(".simpleForm").each(function(index) {
             if ($(this).attr("data-new")) {
               //  anyAreChanged = true;
                 counter++;
             }
         });*/
    if (counter == 0) {

        somethingChanged = false;
    } else {

        somethingChanged = true;
    }
    // see how many are changed
    $("#flagBadge").text("There are " + counter + " changes. " + anyAreChanged);
}
// On change
$(".simpleForm").on('change', function(e) {
    if (e.target.defaultValue) {
        //if (e.target.dataset.server) {
        var serverVal = e.target.defaultValue;
        // var serverVal = e.target.dataset.server;
        var newVal = e.target.value;

        if (serverVal === newVal) {
            //e.target.dataset.new = "";
            $(e.target).removeClass("changedField");

            $("#btnSave").prop("disabled", true);
            $("#btnUndo").prop("disabled", true);
        } else {
            // If they are different, then add the signifier of changes
            //e.target.dataset.new = newVal;
            $(e.target).addClass("changedField");
            $("#btnSave").prop("disabled", false);
           ...