title: Prototype JS, help detecting form element change
body: <p>I am not family familiar with prototype but have been tasked to make some changes to a color picker. I have made the majority of the changes without too much issue.</p>
  
  <p>What I need to do though is listen for the forms input.</p>
  
  <p>Can anyone advise on how this is done?</p>
  
  <p>I found this but I don't understand how to implement it: <a href="http://api.prototypejs.org/dom/form/element/observer/" rel="nofollow noreferrer">http://api.prototypejs.org/dom/form/element/observer/</a></p>
  
  <p>This is the element I have been working with in the plugin.</p>
  
  <p>Instance One</p>
  
  <pre><code>//
  // picker sample text
  //
  this.textValue = document.createElement('input');
  this.textValue.type = "text";
  this.textValue.name = "textValue";
  this.textValue.className = options.textValueClass;
  this.header.appendChild(this.textValue);
  </code></pre>
  
  <p>Instance 2</p>
  
  <pre><code>setColor: function(color) {
    this.textValue.setAttribute('value', color);
    this.sample.style.backgroundColor = color;
  },
  </code></pre>
  
  <p>I want Instance 3 to be something like this.</p>
  
  <pre><code>if (this.textValue.&lt;&lt;changes&gt;&gt; &amp;&amp; this.textValue.&lt;&lt;value.length&gt;&gt; == 7) {
    // Check if valid hex
    // Trigger Save
  }
  </code></pre>
  
  <p>Could someone help fill in the <code>&lt;&lt; &gt;&gt;</code> please.</p>