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();
});
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./questions/1097522/… Check existence of an attribute with JQuery. Might be helpful. – orolo Commented Nov 17, 2011 at 16:10
-
you might also think about, if you aren't doing already, using
jquery.validateto do client side validating so you can save a postback – 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 Commented Nov 17, 2011 at 16:34
4 Answers
Reset to default 7why not use something like
if ($(field).val() != ""){
var fieldId = $(field).attr("id");
$("label[for='"+fieldId+"']").hide();
}
typed this without validating syntax.
repalce
var show_label = function() { this.value || label.css( o.show_css )
with
var show_label = function() { field.value || label.css( o.show_css )
$(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.
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!