is an html form handler possible or currently exist, if so how would I use it?

Question

So, what I want is basically to attach a javascript handler to a form, that whenever one of the form input boxes / select boxes is changed or clicked on, this handler would be called with the id of the element that was changed.

The reason I was wondering about this is because I already have this form that has about 50 input boxes, and I need to append text into a different text box each time an action occurs on any of the 50 input boxes. I know this could be done by attaching a function to each of the 50 text boxes but it seems like there should be an easier way?

Answer 1

You could bind to the keydown/keyup events on the form, and then look at the srcElement or target to find out which input was actually modified. I don't think you can use change on a form element though.

Basically:

function Bind() {
    var obj = document.getElementById("myForm");
    if (obj.addEventListener)
    {
        obj.addEventListener("keyup",Process,false);
        obj.addEventListener("keydown",Process,false);
    }
    else if (obj.attachEvent)
    {
        obj.attachEvent('onkeyup',Process);
        obj.attachEvent('onkeydown',Process);
    }
}
function Process(e) {
    if (!e) var e = window.event;

    var src;
    if (e.target)
        src = e.target;
    else if (e.srcElement)
        src = e.srcElement;

    // src now points to the input that was modified.
}