Geeks With Blogs
Remo Gkardi blog
<meta http-equiv="Content-Type" content="text/html; UTF-8">
<style type="text/css">
#container {width:500px;height:1000px;}
.editable{width:495px; height:200px;border:solid 1px black}
.editor {width:99%; height:195px;background-Color:#ffffcc;}
<title>By Class inline Editor</title>
<script type="text/javascript">
// Author: Remo Gkardi <>
// WWW:
// Simple Inline Editing with simple saving via element ID
// You are free to modify (in fact, you must at least for security purposes)!
// I suggest you use session or add some more element for security purposes
// to 'function SendData'

// NOTICE: You may use this code for any purpose, commercial or
// private, without any further permission from the author. You may
// remove this notice from your final code if you wish, however it is
// appreciated by the author if at least my web site address is kept.
action = 'update.php'; // script where the data shall be saved, each element will be sent by its ID
method = 'post'; // method of submiting the data to the 'action'

function addEvent( obj, type, fn )	{
if (obj.addEventListener)
obj.addEventListener( type, fn, false );
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );

function removeEvent( obj, type, fn ) {
if (obj.removeEventListener)
obj.removeEventListener( type, fn, false );
else if (obj.detachEvent) {
obj.detachEvent( "on"+type, obj[type+fn] );
obj[type+fn] = null;
obj["e"+type+fn] = null;

function editON() {
var id = this.getAttribute('id');
var obj = document.getElementById(id);
removeEvent(obj, 'dblclick',editON)
var val = obj.innerHTML;
obj.innerHTML ='';
var txt=addElement('textarea','editor','edit_'+id,'divedit',id);
txt.value = val;
addEvent(document.getElementById('edit_'+id),'blur', function(){ editOFF(id); });
function editOFF(id) {
var val= document.getElementById('edit_'+id).value;
var obj=document.getElementById(id);
removeEvent(document.getElementById('edit_'+id),'blur',function(){ editOFF(id); });
// Send [val] via include to another script to update/save!
SendData(id, val);
addEvent(obj,"dblclick", editON);
obj.innerHTML = val;

function SendData(id, val) {
var xmlReq = new XMLHttpRequest();
} else if(window.ActiveXObject) {
var xmlReq = new ActiveXObject('Microsoft.XMLHTTP');
var elem = '';
elem = id+"="+val;, action, true);
xmlReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
alert(elem); // This line is kept for debug the data been sent (you MUST remove this line in final code)

function addElement(oType, oClass, oID, oName, oParent) {
obj = document.createElement(oType);'none'; = oID;
obj.className = oClass;'block';
return obj;


function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/\-/g, "\\-");
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
return (arrReturnElements)
function Init() {
var EditObj = getElementsByClassName(document,'div', 'editable');
var elem;
for(i in EditObj) {
addEvent(EditObj[i],"dblclick", editON);

<div id="container">
<div id="a1" class="editable">Hello World</div>
<div id="a2" class="editable">Hello World</div>
<div id="a3" class="editable">Hello World</div>
<div id="a4" class="editable">Hello World</div>
<input type="text">

Online demo of the above example Posted on Sunday, October 29, 2006 8:50 PM Javascript | Back to top

Comments on this post: Inline by class editor

No comments posted yet.
Your comment:
 (will show your gravatar)

Copyright © Remo? Gkardi | Powered by: