jQuery event blur function - how to DRY it up?

Question

I'm using jQuery for an employee management form. This code works, but it is repetitive. Is there a better way to do this? I don't have a lot of experience with jQuery, so I appreciate any pointers you have. The selectors reference inputs in the HTML.

$('#fname').blur(function(){    
var key = "name_first";
var value = $(this).val();
if ( value != _fname ){
    changeemp(key, value);
    _fname = value;
}
});
$('#lname').blur(function(){        
var key = "name_last";
var value = $(this).val();
if ( value != _lname ){
    changeemp(key, value);
    _lname = value;
}           
});
$('#initials').blur(function(){     
var key = "initials";
var value = $(this).val();
if ( value != _initials ){
    changeemp(key, value);
    _initials = value;
}               
});             
$('#email').blur(function(){        
var key = "email";
var value = $(this).val();
if ( value != _email ){
    changeemp(key, value);
    _email = value;
}               
});

HTML:

<label for="fname"><span>First Name</span></label><br/>
<input type="text" id="fname" class="inputdata"><br/><br/>

<label for="lname">Last Name</label><br/>
<input type="text" id="lname" class="inputdata"><br/><br/>

<label for="initials">Displayed Initials</label><br/>
<input type="text" id="initials" class="inputdata"><br/><br/>

<label for="email">Email Address</label><br/>
<input type="email" id="email" class="inputdata"><br/><br/>

Answer 1

An approach would be:

var blurInfos = [
{ id: '#fname', key: 'name_first', varName: '_fname'},
{ id: '#lname', key: 'name_last', varName: '_lname'},
{ id: '#initials', key: 'initials', varName: '_initials'}
];

var varContext = window;

var handleBlur = function (blurInfo) {
    $(blurInfo.id).blur(function(){    
        var key = blurInfo.key;
        var value = $(this).val();
        if ( value != varContext[blurInfo.varName] ){
            changeemp(key, value);
            varContext[blurInfo.varName] = value;
        }
    });
};

for (var i = 0; i < blurInfos.length; i++) {
    var blurInfo = blurInfos[i];
    handleBlur(blurInfo);
};

Notes

• The code assumes the variables _fname, _lname etc. are in the global context (window). Otherwise the code has to be modified accordingly.

Edit

Updated answer, since it is considered to be bad practice defining functions in for loops

Answer 2

Set the key as an attribute on the html elements or use the id to match values from an object in the format of { {sId} : {sValue}, {sId} : {sValue} }. it would turn into something like this:

$('.inputdata').change(function()
{
   // this method should handle comparing and setting
   TryChangeEmp(this.id, this.value);
});

TryChangeEmp = function(sId, sVal)
{
   // where defaultValues is your default values in keyValue pair { sId : sValue }
   if (defaultValues[sId] != sVal) 
   {
      defaultValues[sId] = sVal; 
      /* whatever other processing */
   }
}

I also changed to use the change event, since this seems to fit your criteria better