Adding help text to a form field using Jquery

Question

I am trying to add help text to a form field. When the user clicks in the field, corresponding help text will be shown just below the field. As i have said before i am newbie when it comes to jquery. The jquery code that i have added to my form is as shown.

$("#username").focus(function() {
  $(".name-help").slideDown(500);
}).blur(function() {
  $(".name-help").slideUp(500);
});


$(".email").focus(function() {
  $(".email-help").slideDown(500);
}).blur(function() {
  $(".email-help").slideUp(500);
});

The problem is i am not sure if that's the correct way of embedding jquery functions in php + html code. This is not working. When i inspect the page i get the following errors

1. $ is not a function agent-register

2. Empty string passed to getElementById()

Can anyone help me to fix this? What i am doing wrong here? Or is there an alternative way to achieve this? Any help will be appreciated. Thank you!

Answer 1

1. You're using $(".email") but there is only an ID assigned to this input field, not a class, so you need to replace it with $("#email").
2. You need to wrap you code inside jQuery(document).ready(function($){ ... });

I've altered your code for you:

jQuery(document).ready(function($){

    $('#username').focus(function() {
        $('.name-help').slideDown(500);
    }).blur(function() {
        $('.name-help').slideUp(500);
    });

    $('#email').focus(function() {
        $('.email-help').slideDown(500);
    }).blur(function() {
        $('.email-help').slideUp(500);
    });

});

And also provided you with a live demo:

http://jsfiddle.net/k7jrzxgu/

Hope this helps