Highlight row of form when input is focussed

Question

I have the following piece of Mootools 1.11 code (not upgradable as this is within Joomla), which I want to highlight the form row, when an item within it is focussed. However, this doesn't work. I need to know how to access the parent div of the form item.

window.addEvent('domready', function() {
    var list = $$('#ChronoContact_lensorder div.formrow');
    list.each(function(element) {

var fx = new Fx.Styles(element, {duration:200, wait:false});

element.addEvent('focus', function(){
    fx.start({
        'background-color': '#e6f0f2',
        color: '#FFF'
    });
});

element.addEvent('focus', function(){
    fx.start({
        'background-color': '#FFF',
        'color': '#2F9AD0'
    });
});

}); 
});

HTML is:

<div class="formrow"> 
<label for="ud">Uncut Diameter:</label> 
<input type="text" id="ud" name="ud" /> 
</div> 

Thanks

Answer 1

Instead of looking for the <div>s, you might want to look for the actual <input> using var list = $$('#ChronoContact_lensorder div.formrow input'); Then refer to the parent using the .getParent() method when necessary, like this:

window.addEvent('domready', function() {
    var list = $$('#ChronoContact_lensorder div.formrow input');
    list.each(function(element) {

var fx = new Fx.Styles(element.getParent(), {duration:200, wait:false});

element.addEvent('focus', function(){
    fx.start({
        'background-color': '#e6f0f2',
        color: '#FFF'
    });
});

element.addEvent('blur', function(){
    fx.start({
        'background-color': '#FFF',
        'color': '#2F9AD0'
    });
});

}); 
});

Untested code. Note that the second event is now blur instead of focus, or else both events will fire at the same time and might revert each other's effects!