In-place editing without input tag - JQuery (contentEditable property)

Usage

First, add jQuery, plugin and style sheet to your page.

<link href="editableText.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="../jquery.editableText.js" type="text/javascript"></script>

Next, pass the elements you want to make editable to the plugin. In this example I marked editable elements with "editableText" class.

jQuery(function($){
$('.editableText').editableText({
// default value
newlinesEnabled: false
});
// we will add more code here
});

Now you should create a function that will do something with the new value of the editable element. Bind it to the element using change event.

// bind an event listener that will be called when
// user saves changed content
$('.editableText').change(function(){

var newValue = $(this).html();
// do something

// For example, you could place an AJAX call here:

$.ajax({
type: "POST",
url: "some.php",
data: "newfieldvalue=" + newValue,
success: function(msg){
alert( "Data Saved: " + msg );
}
});
});

VIEW DEMO

DOWNLOAD

GET REPOSITORY