How To Create An Editable Label

Let us see how to create an editable label in JavaScript and CSS. Here, I am using a method to change the label into input field using innerHTML, This method is used to change the inner elements of a node. Suppose there is an h2 tag inside a tag, we can change the h3 into another element using the following code :

<div id=”parentDiv”><h2>This is sample code</h2></div>
document.getElementById(“parentDiv”).innerHTML=”<h5>Some Text</h5>”;

So the <h2> tag will be changed into <h5> tag with new text 'Some Text'.

Here we are using the same method. First our text will be in span tag with the content. I am using a link (<a href=”” /> tag to change the span into input field. With jQuery. Let us see in detail.

Steps:

1. Create html view with span: (i have created 3 fields, Name, title, email address ),
   
   
   
   Code:
   

   <div class="content">
   <h3>Editable Label Example</h3>
   <div class="fields">
   <span>Username :</span><br />
   <div class="editbox">
   <span class="editlabel">enter username</span>
   <!-- <input type="textbox" class="txtbox" placeholder="enter username">-->
   <a class="lnkbtn" href="#"><span class="role">Edit</span></a>
   </div>
   </div>
   
   <div class="fields">
   <span>Title :</span><br />
   <div class="editbox">
   <span class="editlabel">enter title</span>
   <a class="lnkbtn" href="#"><span class="role">Edit</span></a>
   </div>
   </div>
   
   <div class="fields">
   <span>Email :</span><br />
   <div class="editbox">
   <span class="editlabel">enter email address</span>
   <a class="lnkbtn" href="#"><span class="role">Edit</span></a>
   </div>
   </div>
   
   <div class="fields">
   <input type="button" value="DONE">
   </div>
   <div>

2. Now create jquery function (don't forget to inlude jquery library):
   

   <script type="text/javascript">
       $(document).ready(function()
       {
           $(".lnkbtn").click(function()
           {
               var role = $(this).find('.role');
               var value = $(this).siblings();
               var values = value.text();
               if (role.html() == "Edit") {
                   role.html("Save");
                   if (values == "enter username" || values == "enter title" || values == "enter email address") {
                       values = "";
                   }
                   $(this).siblings().html('<input type="textbox" class="txtbox" value="' + values + '" placeholder="enter username">');
               } else {
                   if (value.find('.txtbox').val() != "") {
                       $(this).siblings().html('<span class="editlabel">' + value.find('.txtbox').val() + '</span>');
                       role.html("Edit");
                   } else {
                       alert("Please Fill the field");
                   }
               }
           });
       });
   </script>

   
   
   

Code Description :

When we click the Edit Button(link), it will store the value of its siblings (span/input field) into a variable, if the role of the link button is EDIT, then link button name will be changed to SAVE, and int siblings inner html is changed to input text with the value that we have stored before. After editing the text, click on the save button (same link button), now the role of the button is saved, the else part will be executed.The textbox is changed to span with the value that are fetched from the input field.



Note:

You can reduce the code, there are lot of methods to reduce the code. So try to reduce the number of codes.

Check out my code that I have attached...

If you have any doubts please comment. 

Read more articles on JavaScript: 

• The JavaScript Module Pattern Used With jQuery
• JavaScript From Beginner To Advanced - Part Three (Objects)