Question

I hardly know any Jquery or Javascript. So, I beg your pardon in advance if I ask any question very stupidly.

I want to set backgound text for two text fields.
My two text fields are

<asp:TextBox ID="txtFName" backgroundText="First Name" runat="server" Width="80px"  Style="float: left;"></asp:TextBox>
<asp:TextBox runat="server" ID="txtLName"  backgrountText="Last Name"
                                    Width="110px" Style="float: left"></asp:TextBox>

One of friend wrote the jquery for the first text box and it is working perfectly.
this code is

$(document).ready(function(){

        var inpName = $('#txtFName');
        var backgroundText = inpName.attr('backgroundText');

        inpName.val(backgroundText);

        inpName.focus(function(){
            if(inpName.val() == backgroundText) inpName.val('');
        }).blur(function(){
            if(inpName.val() == '') inpName.val(backgroundText);
        });


    }); 

But if I use this code for the last-name text box, then it does not work
what I did, I copied the entire Jquery code and just replace the var inpName = $('#txtFName'); as var inpName = $('#txtLName');
But, If I do so, My first working text box (txtFirst) does work properly.
but, If I write like this way:
$(document).ready(function(){
checkRequiredInputs();

        var inpName = $('#txtFName');
        var backgroundText = inpName.attr('backgroundText');

        inpName.val(backgroundText);

        inpName.focus(function(){
            if(inpName.val() == backgroundText) inpName.val('');
        }).blur(function(){
            if(inpName.val() == '') inpName.val(backgroundText);
        });

        var inpName = $('#txtLName');
        var backgroundText = inpName.attr('backgroundText');

        inpName.val(backgroundText);

        inpName.focus(function(){
            if(inpName.val() == backgroundText) inpName.val('');
        }).blur(function(){
            if(inpName.val() == '') inpName.val(backgroundText);
        });

I does not work anymore, Why?
Can Anyone Explain me Why is this happening? and how can I solve this problem?

Answer 1

This is my own question and later I have solve it using ajaxWaterMarkExtender. Here I am pasting the code (modified) that is working for me perfectly. This is the code in aspx page

<asp:TextBox ID="txtFName" backgroundText="First Name" runat="server" CssClass="textBoxForUI"
                            Width="80px" Style="float: left;"></asp:TextBox>
                        <cc1:TextBoxWatermarkExtender ID="txtFName_TextBoxWatermarkExtender" runat="server"
                            Enabled="True" TargetControlID="txtFName" WatermarkCssClass="waterMark" WatermarkText="First Name">
                        </cc1:TextBoxWatermarkExtender>
                        <asp:TextBox runat="server" ID="txtLName" CssClass="textBoxForUI" backgrountText="Last Name"
                            Width="110px" Style="float: left"></asp:TextBox>
                        <cc1:TextBoxWatermarkExtender ID="txtLName_TextBoxWatermarkExtender" runat="server"
                            Enabled="True" TargetControlID="txtLName" WatermarkCssClass="waterMark" WatermarkText="Last Name">
                        </cc1:TextBoxWatermarkExtender>