homepage Welcome to WebmasterWorld Guest from 54.237.99.131
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
jquery .focus() problem
neophyte

10+ Year Member



 
Msg#: 4328106 posted 3:43 am on Jun 20, 2011 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4328106 posted 6:05 am on Jun 20, 2011 (gmt 0)

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

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4328106 posted 8:11 am on Jun 20, 2011 (gmt 0)

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

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4328106 posted 4:15 pm on Jun 20, 2011 (gmt 0)

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

WebmasterWorld Senior Member jab_creations us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4328106 posted 2:50 am on Jun 24, 2011 (gmt 0)

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

10+ Year Member



 
Msg#: 4328106 posted 8:21 am on Jun 24, 2011 (gmt 0)

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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved