Track Changes, clear, undo, load data

Using the DOM 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 bg-light mb-3 mt-3">
        <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" id="Email1" aria-describedby="emailHelp" value="[email protected]" />
                    <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" id="Password1">
                </div>
                <div class="form-group">
                    <label for="Select1">Single Select</label>
                    <select class="simpleForm form-control" id="Select1">
                        <option>1. Cake</option>
                        <option selected="selected">2. Icecream</option>
                        <option>3. Parfait</option>
                        <option>4. Pie</option>
                        <option>5. Fudge</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="Textarea1">Example textarea</label>
                  ...

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

// todo: Multple select. On change doesn't work because it's an array. 
// todo: Checkbox
// todo: Load data from server
var serverData = [{
        id: 1,
        value: '[email protected]'
    }, {
        id: 2,
        value: 'password'
    }, {
        id: 2,
        value: 2
    }, {
        id: 3,
        value: [2, 3, 4]
    }, {
        id: 4,
        value: [0, 1]
    },
    {
        id: 5,
        value: 1
    }
];

function loadServerData() {
    //todo: Set the defaultValue from the server by doing e.target.defaultValue = "whatever you want"
    $(".simpleForm").each(function(index) {
        switch (this.type) {}
        var serverVal = $(this).val();
        $(this).attr("data-server", serverVal);
    });
}

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

function anyChanged(e) {
    //var field = e.target;
    var counter = 0;
    var anyFieldsChanged = false;

    $(".simpleForm").each(function(index) {
        switch (this.tagName) {
            case "SELECT":
                var defaultValSelected;
                var valueList = [];

                // If this.multiple, then set up as array
                if (this.multiple) {
                    defaultValSelected = [];
                    var currentSelected = [];
                    //var itemList = document.getElementById(this.id);
                    //var collection = itemList.selectedOptions;

                    //for (let i = 0; i < collection.length; i++) {
                    // valueList.push(collection[i].label);
                    //}

                    // For Default Value
                    for (var i = 0; i < this.length; i++) {
                        if (this[i].defaultSelected === true) {
                            defaultValSelected.push(this[i].value);
                        }
                    }

                    // For Current Selection
                    for (var i = 0; i <...