CODEWITHSUNDEEP
jquery
Undefined
Undefined

Reputation: 11431

jQuery Syntax Issue - Blur + Focus Problems

I'm using the following code to show and hide a label on a text field when someone enters text in the box.

What I'm attempting to do is when you click on the box the text disappears, and if you don't enter text, the label reappears. Any idea what i'm doing wrong?

<script type="text/javascript">
    $(document).ready(function () {
        $("input:text").focus(function () {
            if ($(this).val == "Name/Email:") {
                $(this).val("");    
            };  
        });

        $("input:text").blur(function () {
            if ($(this).val == "") {
                $(this).val("Name/Email:"); 
            };
        });
    });
</script>

<input id="page4-input1" type="text" value="Name/Email:"  />
<input id="page4-input2" type="text" value="Name/Email:" />
<input id="page4-input3" type="text" value="Name/Email:" />
<input id="page4-input4" type="text" value="Name/Email:" />
<input id="page4-input5" type="text" value="Name/Email:" />

Upvotes: 2

Views: 118

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337550

You missed the brackets after val when performing the comparison:

$("input:text").focus(function () {
    if ($(this).val() == "Name/Email:") {
        $(this).val("");    
    };  
});

$("input:text").blur(function () {
    if ($(this).val() == "") {
        $(this).val("Name/Email:"); 
    };
});

Example fiddle

Upvotes: 0

karim79
karim79

Reputation: 342625

$(this).val

should instead be:

$(this).val()

since it is a method (and not a property).

Your code, fixed.

Also, consider using the 'placeholder' attribute and falling back to JavaScript in browsers which do not support it.

Upvotes: 1

Related Questions