title: Jquery hide label if input contains value
body: <p>I am using the following code to hide and show a label in my form with Jquerys onBlur and Focus.</p>
  
  <p>Everything works apart from the label showing when there is a value in one of the inputs. (I echo values into my inputs using php when validation fails so users don't have to retype)</p>
  
  <p>How can I get the following code to check if the input has a value and if so hide the label and show it again when value is blank:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div#first-name,
  div#last-name,
  div#email-address,
  div#password
   {
      position:relative;
      float:left;
      margin-right:3px;
  }
  label.overlabel {
      color:#999;
  }
  label.overlabel-apply {
      position:absolute;
      top:3px;
      left:5px;
      z-index:1;
      color:#999;
      padding-left:10px;
      padding-top:10px;
  }
  </code></pre>
  
  <p><strong>Input:</strong></p>
  
  <pre><code>   &lt;div id="first-name"&gt;
   &lt;label for="first-name-field" class="overlabel"&gt;First name&lt;/label&gt;
   &lt;input id="first-name-field" type="text" name="first_name" /&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>$(document).ready(function() {
  
  
  
      // plugin definition
      $.fn.overlabel = function( options ) {
  
          // build main options before element iteration
          var opts = $.extend( {}, $.fn.overlabel.defaults, options );
  
          var selection = this.filter( 'label[for]' ).map( function() {
  
              var label = $( this );
              var id = label.attr( 'for' );
              var field = document.getElementById( id );
  
              if ( !field ) return;
  
              // build element specific options
              var o = $.meta ? $.extend( {}, opts, label.data() ) : opts;
  
              label.addClass( o.label_class );
  
              var hide_label = function() { label.css( o.hide_css ) };
              var show_label = function() { this.value || label.css( o.show_css ) };
  
              $( field ).
                   parent().addClass( o.wrapper_class ).end().
                   focus( hide_label ).blur( show_label ).each( show_label );
  
          //How to hide label if input contains value
  
              return this;
  
          } );
  
          return opts.filter ? selection : selection.end();
      };
  
      // publicly accessible defaults
      $.fn.overlabel.defaults = {
  
          label_class:   'overlabel-apply',
          wrapper_class: 'overlabel-wrapper',
          hide_css:      { 'text-indent': '-10000px' },
          show_css:      { 'text-indent': '0px', 'cursor': 'text' },
          filter:        false
  
      };
  
  $(document).ready(function() {
      $("label.overlabel").overlabel();
  });
  </code></pre>