Comments on: How to Add Hints & Auto Focus Form Fields using jQuery

By: Jd

Jd — Wed, 26 Oct 2011 19:22:40 +0000

this is not good code, since it inputs the title as a Value and gets submitted

By: Jeff

Jeff — Thu, 18 Aug 2011 17:20:38 +0000

I have a CMS that uses mootools and when I add the handle focus / blur events, I get JavaScript errors and I can’t figure out how to fix.

I added the noConflict function but I still get the errors.

Here is my code:

…

{literal}
//no conflict jquery
jQuery.noConflict();
//jquery stuff
(function($) {
$(’.auto-focus:first’).focus();
$(’TEXTAREA.auto-hint’).focus(function(){
if($(this).val() == $(this).attr(’title’)){
$(this).val(”);
$(this).removeClass(’auto-hint’);
}
});
$(’TEXTAREA.auto-hint’).blur(function(){
if($(this).val() == ” && $(this).attr(’title’) != ”){
$(this).val($(this).attr(’title’));
$(this).addClass(’auto-hint’);
}
});
})(jQuery);
{/literal}

…

Here are the errors:

…
Message: Expected ‘)’
Line: 628
Char: 31
Code: 0
URI: http://www.mysite.com/mypage.php

Message: Object doesn’t support this property or method
Line: 1
Char: 20118
Code: 0
URI: http://www.mysite.com/js/mootools12-min.js

Message: Object doesn’t support this property or method
Line: 65
Char: 5
Code: 0
URI: http://www.mysite.com/mypage.php
…

In my head tag, the script include for mootools comes before the jquery include. I can’t change that because that would mean I would have to add the jquery include to the header template which would add jquery to every web site page. I only want jquery on this particular page so I used a Smarty capture to add the jquery include to the head tag of this page.

Anyone have any ideas?

By: Andrew

Andrew — Fri, 24 Jun 2011 14:10:35 +0000

Useful script, thanks.

By: Thomas

Thomas — Mon, 02 May 2011 17:02:27 +0000

Thanks for this helpful script, I have used it 3 times already. Also a classy way to handle someone so rude. I will follow this blog because of that.

By: Phil

Phil — Wed, 20 Apr 2011 10:22:43 +0000

Here is how to clear the fields that have the title set as the content. Just make sure your title can’t be a possible value a user might enter:

$(’form’).submit(function(){
$(’.auto-hint’).each(function(){
if($(this).attr(’title’) == $(this).val()){
$(this).val(”);
}
});
});

By: Phil

Phil — Wed, 20 Apr 2011 10:13:50 +0000

And by & & I meant:

& &

Or if that doesn’t show then HTML entity escaped ampersands.

By: Phil

Phil — Wed, 20 Apr 2011 10:11:58 +0000

Couple of issues with this:

1. You’ve got & & in your source code which should obviously be a logical and.
2. When submitting the form, if any of the fields have not been filled they will contain the default text. A bit of extra JS is needed to remove it on submission.

By: Mitziman

Mitziman — Wed, 16 Mar 2011 20:48:57 +0000

hey,

your jquery snippets got mixed up a little.

By: Peter Mounce

Peter Mounce — Fri, 11 Mar 2011 15:10:13 +0000

Hey – thanks for the snippet – simple and to the point and precisely what I needed at short notice.

By: ajaxBlender.com

ajaxBlender.com — Wed, 23 Jun 2010 16:31:14 +0000

rp,

From the tone of your comment, I can see you must be a valuable addition to any online community. Welcome to ajaxBlender! :p

Anyway, you probably didn’t realize that this selector is done in jQuery. The code will find the first input field with the ‘auto-focus’ class and focus it, so that the user will not have to click the field with the mouse to start typing. This method is a MUST for a user-friendly web page containing forms.

Thank you for your response, though.

Alex