Trim Your VGR - Clear Default Text

The Problem

You know what always annoyed me?  Having to have multiple @LOAD_ORDER strings in my VGR just to check whether a textbox was left blank (and let's not even talk about when there is more than one textbox).

So, for example:

# ED CHEST AP PORTABLE
EDIT,IF,,chkChestAPportable,EQ,"true",AND
EDIT,IF,,txtChestAPportableComments,NE,,THEN
EDIT,SET,,orderstring,CAT,"@LOAD_ORDER=OIS=123456^^^OOS=0^^^7810=`cboChestAPportableReason^^^53=`txtChestAPportableComments"

EDIT,IF,,chkChestAPportable,EQ,"true",AND
EDIT,IF,,txtChestAPportableComments,EQ,,THEN
EDIT,SET,,orderstring,CAT,"@LOAD_ORDER=OIS=123456^^^OOS=0^^^7810=`cboChestAPportableReason^^^53=..."

I knew that there had to be a better way, and through some trial and error, I came up with a solution that's worked really well for us. But before we get to that, let's take a quick walk through the process and see why some of the early solutions didn't quite work right.

Solution	Problem
Add "..." as the default value for all of our textboxes	That seemed to give us lots of comments like "...Here's my reason" Apparently, the users wouldn't want to hit backspace a few times to get rid of those dots.
Keep the "..." default value, but clear the field when the user first enters it	If they accidentally clicked the wrong field, it would leave it blank and they'd get prompted for a comment after they submitted the form. Yes, I know that it's not broken when that happens, but that's what the customers perceive, and perception is 9/10ths of the law... or something like that

The Solution

So what we needed was something that would:

• Allow us to start our iForms with the default value of "..."
• Clear the field when the user enters the textbox
• If the field is left blank, re-fill the field with the original default value

The Code

/*
* clearDefaultText - jQuery Based Function to Deal with Default Text in Text / Textarea form elements
* http://heo-iforms.blogger.com/
*
* Version: 1.0
* Copyright 2012 Scott Morris - http://heo-iforms.blogger.com/
*
* Dual licensed under MIT or GPLv2 licenses
*   http://en.wikipedia.org/wiki/MIT_License
*   http://en.wikipedia.org/wiki/GNU_General_Public_License
*
*/
 (function( $ ){  
    var methods = {
        init : function(options) {
            // Create some defaults, extending them with any options that were provided
            var settings = $.extend( {
                'filterBy' : 'none',        // options are: {'none','class','text'}
                'className' : '',           // only use if 'filterBy' = 'class'
                'filterText' : '...',       // only use if 'filterBy' = 'text'
                'findString' : 'input[type="text"]'
            }, options);

            var $this = $(this).find(settings.findString);
            if ((settings.filterBy == 'className') && (settings.className != ''))
                $this = $this.filter('.' + settings.className)
            
            if ((settings.filterBy == 'text') && (settings.filterText != ''))
                $this = $this.filter(function() { return $(this).val() == settings.filterText })
                
            return $this.each(function() {
                var $textBox = $(this)
            
                $textBox.focus(function() {
                    if ($textBox.val() == $textBox.attr("defaultText"))
                        $textBox.val("");
                });

                $textBox.blur(function() {
                    if ($textBox.val() == "")
                        $textBox.val($textBox.attr("defaultText"));
                });

                if ($textBox.val() != '')
                    $textBox.attr("defaultText",$textBox.val());
            });
        },
        destroy : function(options) {
            $(window).unbind('.clearDefaultText');
        }
    };

    $.fn.clearDefaultText = function(method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || ! method) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.clearDefaultText' );
        }    
    };
})( jQuery );

Then, in your HTML, you'd just need to call it at init:

$(document).ready(function(){
    $('body').clearDefaultText();
});

The end result is that if the user does not enter the field, the text box will send the "..." that you need to keep HEO happy. If they enter the field, but do not change it (or change it, then change their mind and make it blank again), it reverts back to the "..." and HEO is still happy.

That way, you can ALWAYS use the textbox in your LOAD_ORDER string, so that order above turns into:

# ED CHEST AP PORTABLE
EDIT,IF,,chkChestAPportable,EQ,"true",THEN
EDIT,SET,,orderstring,CAT,"@LOAD_ORDER=OIS=123456^^^OOS=0^^^7810=`cboChestAPportableReason^^^53=`txtChestAPportableComments"

See For Yourself