jquery .focus() problem

[neophyte]

Hello All -

I've got a form where a number of text inputs are optional. All of the "optional" text inputs have a class of .optional.

When the page is loaded I fill each of the ".optional" inputs with the word "Optional". No problem - I've got this working.

What I want to do is when the user gives one of these optional inputs focus, the "Optional" text is removed. Seems pretty simple but I can't get this to work.

My code snippet is shown below:

$(document).ready(function(){
$('input.optional').val('Optional'); // this works
$('input.optional').css('color','#666666'); // this works

if($('input.optional').focus()) {
var inputId = $(this).attr('id');
$('input#' + inputId).val('');
$('input#' + inputId).css('color','#000000');
};
});

Can someone please tell me where I'm going wrong?

Neophyte

[daveVk]

why

var inputId = $(this).attr('id');
$('input#' + inputId).val('');
$('input#' + inputId).css('color','#000000');

instead of

$(this).val('');
$(this).css('color','#000000');

Not sure that will fix it, but less to go wrong, like element not having an id.

[penders]

if($('input.optional').focus()) {

This looks like it will actually trigger the focus event (immediately when the document loads). You need to assign (bind) a function to the focus event handler that will then be called later when the elements actually receive focus.

Replace this...

if($('input.optional').focus()) {
var inputId = $(this).attr('id');
$('input#' + inputId).val('');
$('input#' + inputId).css('color','#000000');
};

With something like...

$('input.optional').focus(function() {  
 var inputId = $(this).attr('id');  
 $(this).val('');  
 $(this).css('color','#000000');  
});  

Once you are in an event handler the 'this' keyword refers to the object/element that triggered the event. In the context you had it in your original code, 'this' would refer to the global object.

[rocknbil]

You don't even need to access the ID. You need to assign functions to the objects, like penders shows, but here's another way (also handles blur.) This is typed on the fly and may need some twiddling, but look at the difference.

$(document).ready(function(){ 
 $('input.optional').val('Optional'); // this works 
 $('input.optional').css('color','#666666'); // this works 
 // 
 $('input.optional').focus(function() { 
 $(this).val(''); 
 $(this).css('color','#000000'); 
 }); 
 $('input.optional').blur(function() { 
 if ($(this).val()=='') { 
 $(this).val('Optional'); 
 $(this).css('color','#666666'); 
 } 
 }); 
}); 

You may need to store the value in a temporary variable for evaluation, but don't think so:

 $('input.optional').blur(function() { 
 var v = $(this).val(); 
 if (v=='') { 
 $(this).val('Optional'); 
 $(this).css('color','#666666'); 
 } 
 }); 

[JAB Creations]

I thought you were trying to learn to use JavaScript? Don't use jQuery, it relies on undependable proprietary Microsoft methods such as innerHTML. It's not cross-browser compatible. It's also depended on so badly that it's extremely easy to encounter a situation with two or more independent copies of jQuery which not only wastes more of the client and server bandwidth though introduces further dependencies making it even easier to break the code with a patch. So stick to using real JavaScript you wouldn't . Here is a quick solution that you can evolve in to something for what you need and it won't utterly alienate dial-up and mobile users with a 70KB jQuery download...

- John

var my_id = document.getElementById('form_id_1');

my_id.addEventListener('focus',function() {clear_value('my_id');},false);

function clear_value(id)
{
 if (document.getElementById(id))
 {
 document.getElementById(id).value = '';
 }
}

[neophyte]

DaveV, Penders and Rocknbil:

Thanks to you all very much for your clear examples and options.

I'm finally over this hurdle and now on to a multiple submit button question on another post.

Thanks again!