Can you create multiple functions on the same onBlur event?

Question

I have a nice default-value check going and client wants to add additional functionality to the onBlur event. The default-value check is global and works fine. The new functionality requires some field-specific values be passed to the new function. If it weren't for this, I'd just tack it onto the default-check and be done.

My question is can I do this sort of thing and have them both fire? What would be a better way?

THE DEFAULT-CHECK

$(document.body).getElements('input[type=text],textarea,tel,email').addEvents ({
    'focus' : function(){
        if (this.get('value') == this.defaultValue)
        {
            this.set('value', '');
        }
    },
    'blur' : function(){
        if (this.get('value') == '')
        {
            this.set('value', (this.defaultValue));
        }
    }
});

ADDED FUNCTIONALITY

<input type='text' id='field_01' value='default data' onBlur='driveData(event, variableForThisField, this.value);'>

The idea is to handle default values as usual, but fire the new function when the field's values are entered. Seems to me one has to fire first, but how?

Again, because the values passed a field specific, I can't just dump it into the global default-check function.

I hope this makes sense.

sounds as if you really need the `placeholder=` HTML5 func with a fallback for non-HTML5 browsers. it will let you deal with the default value and custom validators as per usual. look here at the plugin I have written: https://github.com/DimitarChristoff/mooPlaceholder and the jsfiddle provided. there are plenty of other similar plugins on the mootools forge. — Dimitar Christoff, Jan 03 '12 at 01:07
@Dimitar: couldn't get your link to load. :( but i'll look into it for future reference. :) thank you so much! :D WR! — WhiteRau, Jan 03 '12 at 01:27

score 1 · Accepted Answer · answered Jan 03 '12 at 00:09

Just store the custom variable in a custom data attribute. Not technically standards-compliant [in HTML 4], but it works:

<input type='text' id='field_01' value='default data' data-customvar="variableForThisField">

$(document.body).getElements('input[type=text],textarea,tel,email').addEvents ({
    'focus' : function(){
        if (this.get('value') == this.defaultValue)
        {
            this.set('value', '');
        }
    },
    'blur' : function(){
        if (this.get('value') == '')
        {
            this.set('value', (this.defaultValue));
        } else {
            driveData(this.get('value'), this.get('data-customvar'));
        }
    }
});

fiddle: http://jsfiddle.net/QkcxP/6/

ring-a-ding-ding, of course! i love it when the right answer just goes 'click' when you see it! :) thanks @primatology. seems so obvious now... WR! — WhiteRau, Jan 03 '12 at 01:27

score 0 · Answer 2 · answered Jan 03 '12 at 00:09

I think you're using Mootools? I don't quite recognize the syntax, but I created a JSFiddle and it seems to work with Mootools, and not other libraries.

Here's the fiddle I created to test it: http://jsfiddle.net/NDTsz/

Answer would appear to be yes - certainly in Chrome, but I believe in every browser.

Can you create multiple functions on the same onBlur event?

2 Answers2