Jquery inline text box edit

This lesson is show you how to edit the text like facebook profile inline edit. this is very simple if u start analyze the concept of this trick . it is possible with JQuery and Ajax just with few line's of code. let's see the lesson how will do this.

HTML

take the textarea box and give the ID name #editbox and class name .edittext for styling the textarea box. now take the edit button with anchor tag give the class name .edit when the user click's on Edit we Enable the textarea box to write and update the content.

<div style="margin:0 auto; width:310px; margin-top:20px;">

<textarea name="text" cols="" rows="" id="editbox" class="edittext" style="background:none;">
<?php echo $full['content']?>
</textarea>

<a class="edit" style=" cursor:pointer; padding:5px; background-color:#F60;">Edit</a>

</div>

Javascript

insert the JS library in your document inside the head tag. here i am putting textarea box in disable true mode uisng Jquey prop() method this method is used to set the values are properties of selected element.

 $('.edit').click(function() here when we click on edit button the textarea box will be disabled false and i am adding class using addClass() method to textbox for better look.

 $('#editbox').change(function() after enable the textarea if you made any change the AJAX request send to update.php file and update the text and return to success function after complete the changes i change the textarea mode to disabled true.

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>


$(document).ready(function(){
 
 $('#editbox').prop('disabled',true);
 
 
 $('.edit').click(function(){
  
  $('#editbox').prop('disabled',false);
  $('#editbox').addClass('textbox');
  
 });
 



$('#editbox').change(function(){
  
  var gettext = $("#editbox").val();
  
  var datasend = 'uptext='+ gettext;
  
  $.ajax({
   
   type:"POST",
   url:"update.php",
   data:datasend,
   cache:false,
   success:function(){
    $('#editbox').prop('disabled',true);
    $('#editbox').removeClass('textbox');
   }
   
  });
  
 });
 
 
 
 
});

</script>

Live Demo   Download Script