Loading ...

Change text with jQuery | CodeAsp.Net

Change text with jQuery

 /5
0 (0votes)

Last week I have checked a website. In that website I saw my name and when I clicked on my name, it changed into a textbox and asks me update for my name.
I found it very good.
Today I have created a new dummy project on this functionality.

Here is my Code:-

 

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

</head>
<body>
    <form id="form1" runat="server">

    <%--This is first Div(divLabel).In this div there is one label and it's value is 'My Name'--%> 

    <div id="divLabel" runat="server">
       <asp:Label ID="lblName" runat="server" Text="My Name"></asp:Label>
    </div>

    <%--This is Second Div(divLabel).In this div there is one Textbox and Two LinkButton(one is 'UPDATE' 
	and second is 'CANCEL')--%>

    <div id="divTextbox" runat="server" style="display:none">
       <asp:TextBox ID="txtName" runat="server" ></asp:TextBox>
       <asp:LinkButton ID="lnkUpdate" runat="server" Text="Update"></asp:LinkButton>   <asp:LinkButton ID="lnkCancel" CausesValidation="false" runat="server" Text="Cancel"></asp:LinkButton>
    </div>
    
   
    </form>
</body>

<script type="text/javascript">

    $('#<%=lblName.ClientID %>').click(function(e)//click event
     {
    $('#<%= divLabel.ClientID %>').hide(); // Hide divLabel
    $('#<%= divTextbox.ClientID %>').show()//Show divtextbox
        $('#<%= txtName.ClientID %>').val($('#<%=lblName.ClientID %>').html());//Insert lblName value in txtName textbox.
        return false;
    });

    $('#<%=lnkCancel.ClientID %>').click(function(e)//click event
        {
            $('#<%=lblName.ClientID %>').html($('#<%= txtName.ClientID %>').val());// Set lblName value
            $('#<%= divLabel.ClientID %>').show(); //Show divLabel
            $('#<%= divTextbox.ClientID %>').hide(); //Hide divtextbox
            return false;
        });

        $('#<%=lnkUpdate.ClientID %>').click(function(e)//click event
        {

            $('#<%=lblName.ClientID %>').html($('#<%= txtName.ClientID %>').val()); //Set lblName value
            $('#<%= divLabel.ClientID %>').show(); //Show divLabel
            $('#<%= divTextbox.ClientID %>').hide(); //Hide divtextbox
            return false;
        });

</script>

</html>



Comments (no comments yet)

Top Posts