X-editable - Create editable elements on your page

X-editable allows you to create editable elements on your page. It can be used with any engine (bootstrap, jquery-ui, jquery only) and includes both popup and inline modes. Please try out demo to see how it works.

Features

• popup and inline modes
• supported inputs:
  • text
  • textarea
  • select
  • date
  • datetime
  • dateui
  • combodate
  • html5types
  • checklist
  • wysihtml5
  • typeahead
  • typeaheadjs
  • select2
• client-side and server-side validation
• customizible container placement
• toggle by click, dblclick or manually
• keyboard support (escape/enter/tab)
• works in IE7+ and all modern browsers
• unit tested
• live events

Why editable?

• fast development, no special FORM markup
• less number of screens in your application
• easy adding / removing fields
• simple backend script for data update
• more convenient on small forms

Source: vitalets.github.io

1. INCLUDE CSS AND JS FILES

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="bootstrap-editable/js/bootstrap-editable.js"></script>

2. HTML

<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>

Main attributes you should define are:

• type - type of input (text, textarea, select, etc)
• url - url to server-side script to process submitted value (/post, post.php etc)
• pk - primary key of record to be updated (ID in db)
• id or name - name of field to be updated (column in db). Taken from id or data-name attribute
• value - initial value. Usefull for select, where value is integer key of text to be shown. If empty - will be taken from element html contents

3. JAVASCRIPT

//turn to inline mode
$.fn.editable.defaults.mode = 'inline';
$(document).ready(function() {
    $('#username').editable();
});

More information at: http://vitalets.github.io/x-editable/docs.html