Themeforest

Add Default Text To Form Fields Using jQuery

The following code snippet is a handy jQuery function that will allow you to add default text to any form input text field using the element’s title attribute.

View Default Text Demo.

1. The HTML – Form With Text Inputs

<form action="" method="get">
    <div><input type="text" name="text1" value="" class="default" title="Default Text 1" /></div>
    <div><input type="text" name="text2" value="" class="default" title="Default Text 2" /></div>
    <div><input type="text" name="text3" value="" class="default" title="Default Text 3" /></div>
    <div><input type="submit" name="submit" value="submit" id="submit" /></div>
</form>

So, in the above example we have created a very basic form with 3 text input fields and a submit button. For each of the text inputs we have added the class “default”, which we will use in the jQuery function to identify the input fields and a title attribute, which contains the default text that we wish to display.

2. JQuery Code Part I – Creating The Default Text

For the first part of the function we add code, which will take the title attribute of each input field with the class “default” and insert this in the form field:

$(document).ready(function(){
  $('.default').each(function(){
    var defaultVal = $(this).attr('title');
    $(this).focus(function(){
      if ($(this).val() == defaultVal){
        $(this).removeClass('active').val('');
      }
    })
    .blur(function(){
      if ($(this).val() == ''){
        $(this).addClass('active').val(defaultVal);
      }
    })
    .blur().addClass('active');
  });
});

There are 2 parts to the function:

On Focus
jQuery checks the actual input value and if it is the same as the default text (i.e. no input has yet been made) it will clear the form field and remove the “active” class, basically resetting the text field for the user to enter their text.

On Blur
jQuery checks the input value and if it is empty it will apply the default text from the title attribute and add the active class, which we can use for the default text styling.

3. JQuery Code Part II – Handling Form Submit

When the form is submitted we obviously dont want the default text submitted for any text elements that may have been left blank by the user. We can handle this using the following jQuery function:

$('form').submit(function(){
  $('.default').each(function(){
    var defaultVal = $(this).attr('title');
    if ($(this).val() == defaultVal){
      $(this).val('');
    }
  });
});

The above code checks each input element with the class “default” and if the form field value is the same as the title attribute it will clear the text prior to the form being submitted.

4. The Complete jQuery Code

The following is the complete jQuery code for both the default text and handling the form submit:

$(document).ready(function(){
  $('.default').each(function(){
    var defaultVal = $(this).attr('title');
    $(this).focus(function(){
      if ($(this).val() == defaultVal){
        $(this).removeClass('active').val('');
      }
    })
    .blur(function(){
      if ($(this).val() == ''){
        $(this).addClass('active').val(defaultVal);
      }
    })
    .blur().addClass('active');
  });
  $('form').submit(function(){
    $('.default').each(function(){
      var defaultVal = $(this).attr('title');
      if ($(this).val() == defaultVal){
        $(this).val('');
      }
    });
  });
});

View Default Text Demo.

4 Comments

  • Hi, Your contact fom jQuery code works fine with IE and Google Chrome but not with Mozilla Firfox. it does not works well whenever i put this scripts out of Visual Studio. i give the url in form action like this
    “action=”http://local.client.webconnection.ca/lead/contact_us.aspx?id=148692″ because it is requirement of our project if any solution please help me .

    • Which form are you referring to? This is the comments for default text.

      All of our scripts are developed in Firefox so I can definitely confirm they do work. maybe check you have no jquery errors elsewhere

  • Worked great and fast, thanks!

  • [...] Add default text for our input fields, including a function to remove the default text when the form is submitted – see earlier blog post – Add Default Text To Form Fields Using jQuery [...]

Leave a comment

To add code to your comments wrap the code text in [text][/text] tags