If you're new here, you may want to subscribe to my RSS feed. So that you can read the latest updates about Web2.0 tools, Making Money Online, Tips in SEO, Ajax and many more. Thanks for visiting ProgramimiCOM!

A common knew feature that most web 2.0 sites are using these days is double-click editing. I’m not sure if there’s actually a technical term for it, however, that’s what I like to call it. What I’m referring to is how some sites have static text areas such as divs or cells which when clicked or double-clicked instantly become an editable text box. This is not very difficult to do, and is very nice when you want to have a page displaying information very professionally but still giving your user the ability to edit it quickly and easily.

First of all here is some simple javascript that would go in your page header

text = new Array(); //This array will hold variables to tell the script the state that it should switch tofunction switchState(id)
{
content = ”; //Nullify the content variable
if( text[id] != 1 ) //Check if text[’id’] is set to 1 (explained later)
{
content = document.getElementById(‘child’ + id).innerHTML; //Define content as the inner content of the div
new_html = ‘<input type=”text” id=”child’ + id + ‘” value=”‘ + content + ‘” />’; //Define the new HTML (textbox)
document.getElementById(‘parent’ + id).innerHTML = new_html; //Set the parent div’s HTML to the new HTML
text[id] = 1; //We set this variable for the script to remember that we already set it to a text box
}
else
{
//So with this case we will be doing the opposite and switching back to a div
content = document.getElementById(‘child’ + id).value; //Define content as the value of the textbox
new_html = ‘<div id=”child’ + id + ‘”>’ + content + ‘</div>’; //Define the new HTML (div)
document.getElementById(‘parent’ + id).innerHTML = new_html; //Set the parent div’s HTML to the new HTML
text[id] = 0; //We set this variable for the script to remember that we have set it back to a div
}
}

Most of this script is explained in the comments, and what it basically does is determines the current state of the div/textbox then takes the content out of the div/textbox and puts it into a new div/textbox.

I will now show you the basic HTML structure to make this work.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8″ />
<title>The amazing transforming div/textbox!</title><script language=“javascript” type=“text/javascript”>
text = new Array(); //This array will hold variables to tell the script the state that it should switch to

function switchState(id)
{
content = ”; //Nullify the content variable
if( text[id] != 1 ) //Check if text[’id’] is set to 1 (explained later)
{
content = document.getElementById(‘child’ + id).innerHTML; //Define content as the inner content of the div
new_html = ‘<input type=”text” id=”child’ + id + ‘” value=”‘ + content + ‘” />’; //Define the new HTML (textbox)
document.getElementById(‘parent’ + id).innerHTML = new_html; //Set the parent div’s HTML to the new HTML
text[id] = 1; //We set this variable for the script to remember that we already set it to a text box
}
else
{
//So with this case we will be doing the opposite and switching back to a div
content = document.getElementById(‘child’ + id).value; //Define content as the value of the textbox
new_html = ‘<div id=”child’ + id + ‘”>’ + content + ‘</div>’; //Define the new HTML (div)
document.getElementById(‘parent’ + id).innerHTML = new_html; //Set the parent div’s HTML to the new HTML
text[id] = 0; //We set this variable for the script to remember that we have set it back to a div
}
}
</script>
</head>

<body>

<div id=“parent1″ ondblclick=“javascript:switchState(1)”>
<div id=“child1″>Some text</div>
</div>

<div id=“parent2″ ondblclick=“javascript:switchState(2)”>
<div id=“child2″>Some more text</div>
</div>

</body>
</html>

As you can see it’s very simple to setup, and very simple to use. Just double click on the text to transform it into a textbox, then double click it again to transform it back!

Filed Under: Javascript, Javascript Tutorials 
Tags: