[Demo] Detect Changes to Default Value of Spectrum Colorpicker

Detect Changes to Default Value of Spectrum Colorpicker

by Tadit Dash

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
<div>
  <input />
</div>

<div style="margin-top: 10px;">
  <select>
    <option value="1">1</option>
    <option value="2" selected="selected">2</option>
    <option value="3">3</option>
  </select>
</div>
<div style="margin-top: 10px;">
  <textarea>Hello World</textarea>
</div>

<input id="colorpicker" style="display:none;" value="#000" />

<div style="margin-top: 10px;">
  <button onclick="CheckForChanges()">
    Check For Changes
  </button>
</div>

JavaScript

$(document).ready(function() {
  $('#colorpicker').spectrum({
    showInput: true,
    preferredFormat: "hex"
  });

  $('.sp-container .sp-input').each(function() {
    this.defaultValue = this.value;
  });
});

function CheckForChanges() {
  if (GetHasChanges()) {
    alert("Yes we have changes!!!");
  } else {
    alert("No changes!!!");
  }
}

function GetHasChanges() {
  var hasChanges = false;

  $(":input:not(:button):not([type=hidden])").each(function() {
    if ((this.type == "text" || this.type == "textarea" || this.type == "hidden" || this.type == "number") && this.defaultValue != this.value) {
      hasChanges = true;
      return false;
    } else {
      if ((this.type == "radio" || this.type == "checkbox") && this.defaultChecked != this.checked) {
        hasChanges = true;
        return false;
      } else {
        if ((this.type == "select-one" || this.type == "select-multiple")) {
          for (var x = 0; x < this.length; x++) {
            if (this.options[x].selected != this.options[x].defaultSelected) {
              hasChanges = true;
              return false;
            }
          }
        }
      }
    }
  });

  return hasChanges;
}