Jquery hide label if input contains value

Question

I am using the following code to hide and show a label in my form with Jquerys onBlur and Focus.

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)

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:

CSS

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;
}

Input:

   <div id="first-name">
 <label for="first-name-field" class="overlabel">First name</label>
 <input id="first-name-field" type="text" name="first_name" />
   </div>

Javascript:

$(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();
});

stackoverflow.com/questions/1097522/… Check existence of an attribute with JQuery. Might be helpful. — orolo
– orolo, Commented Nov 17, 2011 at 16:10
you might also think about, if you aren't doing already, using jquery.validate to do client side validating so you can save a postback — Eonasdan
– Eonasdan, Commented Nov 17, 2011 at 16:20
For starters, you are using TWO $(document).ready( function() { ... I am looking at the rest of it in jsFiddle. — zequinha-bsb
– zequinha-bsb, Commented Nov 17, 2011 at 16:34

AyKarsi · Accepted Answer · 2011-11-17 16:22:48Z

7

why not use something like

if ($(field).val() != ""){
  var fieldId = $(field).attr("id");
  $("label[for='"+fieldId+"']").hide();
}

typed this without validating syntax.

answered Nov 17, 2011 at 16:22

AyKarsi

9,70510 gold badges59 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rob_st Over a year ago

If you'd want to hide the label field after the user has entered text, use the keyup-handler, as shown in this answer

roselan · Accepted Answer · 2011-11-17 16:12:48Z

0

repalce

var show_label = function() { this.value || label.css( o.show_css )

with

var show_label = function() { field.value || label.css( o.show_css )

answered Nov 17, 2011 at 16:12

roselan

3,7651 gold badge23 silver badges20 bronze badges

Comments

Senad Meškin · Accepted Answer · 2011-11-17 16:16:45Z

0

$(document).ready(function(){
   $('#form-id input').each(function() { if($(this).val().length > 0) $('#form-id label[for="' + $(this).attr('id') + '"]').hide();
$(this).change(function() {
   if($(this).val().length > 0)
       $('#form-id label[for="' + $(this).attr('id') + '"]').hide();
   else 
       $('#form-id label[for="' + $(this).attr('id') + '"]').show();
});
 });

});

this could help you, I have searched through input values on load and if there is value hide label related to that input, and also I have attached event "onChange" if there is value on blur then hide label.

answered Nov 17, 2011 at 16:16

Senad Meškin

13.8k4 gold badges39 silver badges55 bronze badges

Comments

zequinha-bsb · Accepted Answer · 2011-11-17 17:09:05Z

0

All that coding could just have be reduced to this:

jQuery('#form-id input').blur( function () {
    if ($(this).val() == '') 
        $(this).parents("div").find("label[for=" + this.id + "]").show().text();
}).focus( function () {
    $(this).parents("div").find("label[for=" + this.id + "]").hide().text();
});

==> using this approach, make sure that label is 
    hard coded with "overlabel-apply"

==> also, to have a whole form scope (in case you are not putting each
    input in a div), change $(this).parents("div") to $(this).parents("#form-id")

Good luck!

answered Nov 17, 2011 at 17:09

zequinha-bsb

7094 silver badges10 bronze badges

Collectives™ on Stack Overflow

Jquery hide label if input contains value

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related