Prototype JS, help detecting form elementm change

Question

Hi,

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.

What I need to do though is listen for the forms input.

Can anyone advise on how this is done?

I found this but I don't understand how to implement it: http://api.prototypejs.org/dom/form/element/observer/

This is the element I have been working with in the plugin.

Instance One

//
// 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);

Instance 2

setColor: function(color) {
  this.textValue.setAttribute('value', color);
  this.sample.style.backgroundColor = color;
},

I want Instance 3 to be something like this.

if (this.textValue.<<changes>> && this.textValue.<<value.length>> == 7) {
  // Check if valid hex
  // Trigger Save
}

Could someone help fill in the << >> please.

Thanks!

Answer 1

see http://www.prototypejs.org/api/event/observe.

this.observe('change', this.validateOnChange.bind(this));

validateOnChange: function(event) {
    var value;
    value = $(this.fieldid).getValue();
    if (value.length == 7) {
        //Check if valid hex
        // Trigger Save
    }
}