Attach event to INPUT and SELECT boxes

Question

I can't seem how to figure as to how to attach an event (dynamically) to textboxes and select boxes:

Error: Object Required, line 19

<!DOCTYPE html>
<html>
    
    <head>
        <script type="text/javascript">
            window.onload = function fnOnLoad() {
                var t = document.getElementsByTagName('SELECT');

                var i;
                for (i = 0; i < t.length; i++) {
                    alert(t[i].id)

                    document.getElementById(t[i].id).attachEvent('onfocus', function () {
                        document.getElementById(this.id).style.backgroundColor = "#FFFF80"
                    })
                    document.getElementById(t[i].id).attachEvent('onblur', function () {
                        document.getElementById(this.id).style.backgroundColor = "#FFFFFF"
                    })

                }
            }
        </script>
    </head>
    
    <body>
        <input id="t1" type="text">
        <input id="t2" type="text">
        <input id="t3" type="text">
        <br>
        <br>
        <select id="d1"></select>
        <select id="d2"></select>
        <select id="d3"></select>
    </body>

</html>

You need to run this when the DOM is ready, not in the onload event. — Diodeus - James MacFarlane, Oct 16 '12 at 18:33
take a look at this: http://stackoverflow.com/q/3474037/405117 — Vikram, Oct 16 '12 at 18:41

score 0 · Answer 1 · answered Oct 16 '12 at 18:41

why don't you use jquery and use the bind function: for example:

var element = $('#myElementId') // equivalent to document.getElementById
element.bind('click', function() {
    // when the element is clicked, it will do what ever you write here
    alert('i was clicked');
});

you can put this code inside the onload or onready function with jquery like this:

$(function() {
    var element = $('#myElementId') // equivalent to document.getElementById
    element.bind('click', function() {
        // when the element is clicked, it will do what ever you write here
        alert('i was clicked');
    }); 
}); // this is the onload

or

$(document).ready(function() {
    var element = $('#myElementId') // equivalent to document.getElementById
    element.bind('click', function() {
        // when the element is clicked, it will do what ever you write here
        alert('i was clicked');
    }); 
}); // this is the on ready

BTW - you can bind all the select elements by getting them with jquery selector so instead of `$('#myElementId')` you would use `$('select')` to get all the select elements in the document — Mr T., Oct 16 '12 at 18:43

score -1 · Accepted Answer · answered Oct 16 '12 at 18:44

<script type="text/javascript">

function fnOnLoad() {

    var t = document.getElementsByTagName('INPUT');
    for (var i = 0; i < t.length; i++) {
            t[i].onfocus = function() { this.style.backgroundColor = '#FFFFC4';};
            t[i].onblur = function() { this.style.backgroundColor = '#FFFFFF'; };
    }

    var d = document.getElementsByTagName('SELECT');
    for (var i = 0; i < d.length; i++) {
            d[i].onfocus = function() { this.style.backgroundColor = '#FFFFC4'; };
            d[i].onblur = function() { this.style.backgroundColor = '#FFFFFF'; };
    }

}
</script>

Attach event to INPUT and SELECT boxes

2 Answers2