jQuery bind focus and blur events on input form

Question

Hi I have an input form and I also have some labels which will help a user to fill out the form. My css is set to hide these by default but when the user clicks on focus's on the input field then the next label will show and on blur it will be hidden.

With the current script I have written for some reason it keeps showing all the labels and it doesn't seem to hide it on blur.

Not an expert on jQuery so if any could help me fix this problem that would great.

My code is below or view a jsFiddle:

js/js.js

$(document).ready(function(){
$('.form-control').bind('blur', function(){
$('.form_helper').removeClass("form_helper_show").addClass('.form_helper'); });

$('.form-control').bind('focus', function(){
$('.form_helper').removeClass("form_helper").addClass('form_helper_show'); });    

});

css/style.css

ul {
 list-style:none;
}     

li:nth-child(2), li:nth-child(3) {
display:inline;
}

.form_helper { 
display:none;   
}

.form_helper_show {
display:inline-block;   
}

index.html

<div class="form-group">
<ul class="form_group">
    <li><label for="client_name">Company Name</label></li>
    <li><input class="form-control" name="client_name" type="text" id="client_name"/></li>
    <li><label for="client_name_helper" class="form_helper">Input your clients name</label></li>
 </ul>    
</div>
 <div class="form-group">
 <ul class="form_group">
    <li><label for="client_name">Company Code</label></li>
    <li><input class="form-control" name="client_name" type="text" id="client_name"/></li>
    <li><label for="client_name_helper" class="form_helper">Input your clients code</label></li>
</ul>    
</div> 

Answer 1

Try

fiddle Demo

$(document).ready(function () {
    $('.form-control').bind('blur', function () {
        $(this).parent().next('li').find('.form_helper_show').removeClass("form_helper_show").addClass('form_helper');
    });

    $('.form-control').bind('focus', function () {
        $(this).parent().next('li').find('.form_helper').removeClass("form_helper").addClass('form_helper_show');
    });
});

---

Better Approach

fiddle Demo

$(document).ready(function () {
    $('.form-control').bind('blur', function () {
        $(this).parent().next('li').find('.form_helper').hide();
    }).bind('focus', function () {
        $(this).parent().next('li').find('.form_helper').show();
    });
});

---

Better use .on() instead of .bind()

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document. For earlier versions, the .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on() or .delegate().

---

References

this keyword

.next()

.find()

.parent()