Apr. 21 2011
1

Clearing form values (and putting back the defaults) with jQuery

This is probably the oldest trick in the book, but I’m a n00b to jQuery, so I wanted to try and figure this out on my own.

I have a decently simple form where I wanted to put the field name as the default (so it shows up in the field itself). When the user clicks onto the field, the default value disappears giving them a blank field. When the user clicks or tabs, it checks if the field is still blank and repopulates the default.

<script type="text/javascript">
  $(document).ready(function(){
    // put all the defaults into an array for later reference
    var defaults = new Array();
    $("form input:text").each(function() {
      defaults[$(this).attr('name')] = $(this).val();
    });
 
    // when focused, make the field blank
    $("form input:text").focus(function() {
      if($(this).val()==defaults[$(this).attr('name')]) {
        $(this).val("");
      }
    });
 
    // if field is empty afterward, add text again
    $("#form").children('input').blur(function() {
      if($(this).val()=="") {
        $(this).val(defaults[$(this).attr('name')]);
      }
    });
 
  });
</script>

As soon as the page has finished loading, we traverse each text input field with the each() function and put the default value (using val()) into an array where the name of the field (attr('name')) is the key.

When the user clicks or tabs into the field, we have an event set up (with focus()) which checks to see if the current field value is the same as the default value (meaning it’s unchanged). If it is unchanged, the field becomes blank.

When the user clicks or tabs out of the field, we have an event set up (with blur()) which checks to see if the current field is the same as the default value (meaning, again, it’s unchanged). If it is, repopulate the field with the default value from the array.

Tada!

Remember, for jQuery to work properly, you’ll need to include it into your page. It’ll need to be before any other included jQuery scripts, too. Google has been a big supporter of jQuery and publicly put the on their CDN, you can call it like so:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

1 comment

  1. January 6, 2015 at 4:22 pm

    Awesome content you post here, i have shared this post on my facebook

Leave a Reply

Previous post:

Next post:

Last.fm interface from fmTuner (modified by me).

Twitter interface from HL Twitter.

Dedicated to my mom, Sharon. May she rest peacefully.
Love you always. (March 23, 1965 - November 12, 2011)

Unsupported Browser!

My site is designed for and currently displays best with modern browsers (and it looks like you don't have one!).

Everything should still function properly, but you won't be able to see all the fancy effects, text, or the way I intended my design to look.

Consider trying the latest version of either Firefox or Chrome... I think you'll like it!

Logan Bibby

P.S.: You can continue viewing my site by clicking the "close" link and you'll never see this again. :)