I can't seem to access the variable defaultValue down in my .blur() function. I've tried various stuff but with no luck. So far I only get an empty object. What's wrong?

jQuery(document).ready(function(){

    jQuery('#nameInput, #emailInput, #webInput').focus(function(){      
        var defaultValue = jQuery(this).val();
        jQuery(this).val("");
    })
    .blur(function(defaultValue){   
         if(jQuery(this).val() == ""){
             jQuery(this).val(defaultValue);
         }
    }); 

});

I can't seem to access the variable defaultValue down in my .blur() function. I've tried various stuff but with no luck. So far I only get an empty object. What's wrong?

jQuery(document).ready(function(){

    jQuery('#nameInput, #emailInput, #webInput').focus(function(){      
        var defaultValue = jQuery(this).val();
        jQuery(this).val("");
    })
    .blur(function(defaultValue){   
         if(jQuery(this).val() == ""){
             jQuery(this).val(defaultValue);
         }
    }); 

});

• javascript
• jquery
• jquery-events

3 Answers 3

Looks like the question is about the passing data into the .blur or .focus event. per jQuery API - http://api.jquery./blur/

blur( [eventData ], handler(eventObject) )

So if you want to pass data - you can send a parameter to event - which will appear as data in event object.

see this fiddle for more info

http://jsfiddle/dekajp/CgP2X/1/

var p = {
    mydata:'my data'
};

/* p could be element or whatever */
$("#tb2").blur(p,function (e){
    alert('data :'+e.data.mydata);
});

Because your code is wrong :-) you define var inside function (var defaultValue) which is then immediately wiped out.

There are two solutions: define your var as a global var before you bind blur event, or store it in the data of object liket his (which I remend):

$(document).ready(function(){
    $('#nameInput, #emailInput, #webInput').focus(function(){      
        $(this).val("").data('defaultValue',jQuery(this).val());
    }).blur(function(defaultValue){   
        if($(this).val() == ""){
            $(this).val($(this).data('defaultValue'));
        }
    }); 
});

It seems to me that you don't understand the basics of JavaScript.

First of all variables in JS are localized to function's scope, so you can't declare variable with var in one function and access it in other function

Second, you can't pass anything to DOM-event handler, except event-object, this is defined by the DOM specification, sometimes you can use event data parameter to the blur jQuery method.

Try this:

jQuery(document).ready(function(){
    var defaultValue;
    jQuery("#nameInput, #emailInput, #webInput").focus(function(){      
        defaultValue = jQuery(this).val();
        jQuery(this).val("");
    })
    .blur(function(){   
        if(jQuery(this).val() == ""){
            jQuery(this).val(defaultValue);
        }
     }); 

 });

First of all, you need to distinguish blur method (function) and handler (function) which is the argument to the blur. You was trying to pass the defaultValue exactly to handler, but that can't be done. Inside handler the defaultValue would be equal eventObject, so you can do smth like console.log(defaultValue.timeStamp) and you'll see smth like 123482359734536

In your approach you can't even use event.data argument to the blur cause it will be set at the time of blur's call (attaching handler). You need to declare a var outside of the both handlers, so it will be visible to both of them

You may consider to read some prehensive book on JS.

I read "Professional JaveScript For Webdevelopers" by Nicolas Zakas. There is a new edition