Question

I have this following codes that works perfectly on jQuery 1.3.2 :

        $("#passwordLabel").click(function()
            {
                $(this).hide();
                $("#password").focus();
            }
        );

        $("#confirmpasswordLabel").click(function()
            {
                $(this).hide();
                $("#confirmpassword").focus();
            }
        );

        $("#password").focus(function()
            {
                $("#passwordLabel").hide();
            }
        );

        $("#confirmpassword").focus(function()
            {
                $("#confirmpasswordLabel").hide();
            }
        );

        $("#password").blur(function()
            {
                if($(this).val()=="")
                {
                    $("#passwordLabel").show();
                }
            }
        );

        $("#confirmpassword").blur(function(value)
            {
                if($(this).val()=="")
                {
                    $("#confirmpasswordLabel").show();
                }
            }
        );
    });

but unfortunately, this codes doesn’t work anymore when I change my jQuery Library into version 1.6.4.

is that because jQuery 1.6.4 doesn’t have that syntax anymore?

Answer 1

Fine name you have there by the way.

It looks like your new to JavaScript. Let me give you some pointers. Firstly you should try to reduce the number of times you ask the browser for an element. With jQuery all you have to do is save the selected element to a variable. I personally like to prepend my element variables with $ so I know that there jQuery elements.

//too many selections
$('element').foo(); //query 1
$('element').bar(); //query 2
$('element').baz(); //query 3

//better
$element = $('element'); //query 1
$element.foo();
$element.bar();
$element.baz();

The second thing is that you should always keep your { on the same line as the start of your block. In most languages this doesn’t matter and in a lot of cases it will work in JavaScript but because of semicolon insertion its best to keep your { on the same line.

//one example of why this is bad
return
{
    "foo": "bar"
};

//The above actually becomes
return;
{
    "foo": "bar"
};

//should have actually been
return {
    "foo": "bar"
};

The last thing I noticed is that your having javascript focus each input when the corresponding label is clicked. This can actually be done without JavaScript. All you need to do is add the for attribute to your labels. They should be set to the id of there corresponding input.

<!-- from this -->
<label id="passwordLabel">Password</label>
<input id="password" type="password">

<!-- to this -->
<label id="passwordLabel" for="password">Password</label>
<input id="password" type="password">

Anyway provided you fixed your html the following should do the trick.

//Wait for the page to load
$(function() {
    var $passwordLabel, $confirmpasswordLabel, $password, $confirmpassword;

    //Pre select the form elements
    $passwordLabel = $("#passwordLabel");
    $password = $("#password");
    $confirmpasswordLabel = $("#confirmpasswordLabel");
    $confirmpassword = $("#confirmpassword");

    //bind events for the password input
    $password.focus(function() {
        //on focus hide the label
        $passwordLabel.hide();
    });
    $password.blur(function() {
        if(!$password.val()) {
            //if the input is empty then restore the label on blur
            $passwordLabel.show();
        }
    });

    //bind events for the confirm password input
    $confirmpassword.focus(function() {
        //on focus hide the label
        $confirmpasswordLabel.hide();
    });
    $confirmpassword.blur(function() {
        if(!$confirmpassword.val()) {
            //if the input is empty then restore the label on blur
            $confirmpasswordLabel.show();
        }
    });
});​

If you want to see some working code I made you a jsFiddle with the example above and some sample inputs: http://jsfiddle.net/wef85/8/