kevinleary.net

Form Input Default Values With The jQuery valueFx() Plugin

Have you ever wanted to pro­vide forms with default val­ues or exam­ples to improve user expe­ri­ence? Here’s how you can do it in an easy, re-usable way using a jQuery plu­gin called valueFx.

This is a more agile, re-usable ver­sion of the Focus & Blur effects I’ve pre­vi­ously posted about. This can be used on as many text <input>‘s as you like, sim­ply by adding class=“valueFx” to the tag.

For a bet­ter expla­na­tion of what this is visit the Search Field Focus & Blur Effects post.

XHTML

<input id="email" class="valueFx" name="email" type="text" value="you@domain.com" />

JavaScript / jQuery Plugin

jQuery.fn.valueFx = function() {
	return this.each(function(){
		var $field = $(this);
		var $value = $(this).val();
		var $newVal;	
		$field.addClass('placeholder');
		$field.focus(function(){
			if($field.hasClass('valueFx')){
				if (($value == '') || ($value == $value)) {
					$field.removeClass('placeholder').addClass('focus').val('');
					$newVal = $(this).val();
				}
			}
		});
		$field.blur(function(){
			$newVal = $(this).val();
			if ($newVal == '') {
				$field.val($value).removeClass('focus').addClass('placeholder');
			} else {
				$field.removeClass('placeholder').removeClass('valueFx');
			}
		});
	});
};

Sim­ple Usage

$('input.valueFx').valueFx();

Above is the eas­i­est way to setup this plu­gin. Of course, I pre­fer to add a lit­tle more logic to make things more intuitive.

Advanced Usage

if ($('input.valueFx').length &gt; 0) {
	$.getScript('/path/to/jquery.valueFx.js',function(){
		$('input.valueFx').valueFx();
	});
}

What this does is first check to see if there are any input fields in the doc­u­ment that have a class of “val­ueFx”. If there are, we’ll load in the jquery.valueFx.js file, and run a func­tion once it has been loaded. This func­tion (or call­back) runs the val­ueFx() method on all the input’s that have been found.

Down­load

jQuery Value Effects Plugin

Resources

5 Comments ↓

  1. Marko Randjelovic / 7.25.09 / 5:06 PM

    Thank you! :) I’ve just added focus & blur effects to the com­ment form on a Word­Press theme I’m devel­op­ing for my website.

    Thanks! :D

  2. kevinlearynet / 7.27.09 / 12:30 AM

    No prob­lem Marko, was it easy enough to set up? Did you encounter any prob­lems along the way?

  3. Marko Randjelovic / 7.27.09 / 10:11 AM

    Yeah, it was quite easy, no prob­lems set­ting it up. Although, I don’t know how to make it work for the textarea field, like in your com­ment form. :) Also, after enter­ing my name in a field and mov­ing to the next input field, the field shrinks from its orig­i­nal size. I didn’t think it had any­thing to do with your plu­gin, but I’ve tried dis­abling the plu­gin just now and it doesn’t shrink any­more. I can’t think of a rea­son why it’s hap­pen­ing.
    I have another prob­lem, but it’s not with your plu­gin, it’s with Word­Press. I’ve added the val­ueFx class to the input fields and it works prop­erly but when I add the <?php echo $comment_author; ?> func­tion to the end of the value attribute like this:
    value=“Name <?php if ($req) echo “(required)”; ?> <?php echo $comment_author; ?>“
    things get com­pli­cated. After adding a com­ment, the fields now con­tain both the default value and a name, for exam­ple. But it works on your site. :) How did you get around it? Using an IF statement?

    Thanks!

  4. kevinlearynet / 7.28.09 / 12:07 AM

    Hey Marko,

    I’m actu­ally using a sys­tem called IntenseDe­bate to man­age my com­ments; so I didn’t actu­ally develop the com­ment sys­tem you see here, Automat­tic did, so I can’t answer your ques­tions about inte­grat­ing it with the Word­Press forms.

    Can you send me a demo to where the input fields are shrink­ing? I’d love to help.

  5. Marko Randjelovic / 7.28.09 / 9:31 AM

    Hi Kevin,

    I see, I’ll check it out. About the demo, I’ll upload the site and send you the link through your con­tact form. I’m not sure I’ll have the time today to set up a test site. If not, I’ll do it tomorrow.

    Thank you so much for your time and will­ing­ness to help me out. :)

Leave a comment

will not be published

Wrap code blocks with <pre lang="LANGUAGE" line="1"> and </pre> where LANGUAGE is a GeSHi supported language syntax.