How do I add OnChange event to select element that is styled with custom-form-elements.js?

Question

This works just fine to call an OnChange event:

<FORM>
<SELECT ONCHANGE="alert(this.name + ' changed: ' + this.value)">
<OPTION VALUE="1">Option 1</OPTION>
<OPTION VALUE="2">Option 2</OPTION>
<OPTION VALUE="3">Option 3</OPTION>
</SELECT>
</FORM>

But when I use this styling package:

https://web.archive.org/web/20161013011416/http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

The OnChange event no longer works.

<FORM>
<SELECT class="styled" ONCHANGE="alert(this.name + ' changed: ' + this.value)">
<OPTION VALUE="1">Option 1</OPTION>
<OPTION VALUE="2">Option 2</OPTION>
<OPTION VALUE="3">Option 3</OPTION>
</SELECT>
</FORM>

Anyway to make the OnChange event with the custom-form-elements.js?

Answer 1

The answer is on the page you linked to ;)

Scroll to the bottom and you will read:

onChange and other JavaScript events

This script utilizes JavaScript's onChange and other events. Because these events can only be used once, if you want to add more functions to an event, you will need to call them from inside my script.

::EDIT::

The Custom.clear and Custom.choose functions are both functions that will be called in the onChange event. So my guess is you modify the js-file as follows, and see what comes out:

clear: function() {
    // add your code here. example:
    alert(this.name + ' changed: ' + this.value);

    inputs = document.getElementsByTagName("input");
    for(var b = 0; b < inputs.length; b++) {
        if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
            inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
        } else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
            inputs[b].previousSibling.style.backgroundPosition = "0 0";
        } else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
            inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
        } else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
            inputs[b].previousSibling.style.backgroundPosition = "0 0";
        }
    }
},
choose: function() {
    // add your code here. example:
    alert(this.name + ' changed: ' + this.value);

    option = this.getElementsByTagName("option");
    for(d = 0; d < option.length; d++) {
        if(option[d].selected == true) {
            document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
        }
    }
}

Note: instead of writing chunks of code in the js-file, you should just call you own custom function once from the clear and/or choose function(s).

Answer 2

I faced the same problem....It may not be the most elegant way to fix this but I putted the radio button inside a span tag and called the onclick event from there. This thing drome me crazy for days... Hope this helps