Source of clickEdit.html
<html>
<head>
<title>Javascript Click Update Test</title>
<script language="javascript">
<!-- // hide from older browsers
var oldItem='';
var oldValue='';
function setEdit(tId) {
var mE = getElem(tId);
/*
* only process if this element exists
*/
if ( mE ) {
/*
* if this element is the same element, do nothing
*/
if ( oldItem == tId ) {
return;
}
/*
* if you click on a different element, reset the
* old element to it's old value
*/
if ( oldItem != '' ) {
getElem(oldItem).innerHTML=oldValue;
getElem(oldItem).className="noedit";
oldItem='';
oldValue='';
}
/*
* set the old element, value globals
*/
oldItem = tId;
oldValue = mE.innerHTML;
/*
* set up the span replacement innerHTML string
*/
lt = '<input type="text" id="curVal" value="'+mE.innerHTML+'"';
/*
* call the endEdit function if the user presses the return key
*/
lt = lt+' onkeyup="if(event.which==13){endEdit(\''+tId+'\');}">';
lt = lt+'<button onclick="endEdit(\''+tId+'\');">Update</button>';
lt = lt+'<button onclick="clrEdit();">Cancel</button>';
/*
* change the span's innerHTML to the above string
*/
mE.innerHTML=lt;
/*
* select the text, so the user can type away
*/
getElem('curVal').select();
mE.className="showedit";
}
}
function clrEdit() {
if ( oldItem != '' ) {
var oI = getElem(oldItem);
if ( oI ) {
oI.innerHTML=oldValue;
oI.className="noedit";
}
oldItem='';
oldValue='';
}
}
function endEdit(tId) {
var nV = getElem('curVal').value;
if ( nV == oldValue ) {
alert('This is the same value.');
} else {
alert('The new value is '+nV+'');
}
getElem(tId).innerHTML = nV;
oldValue='';
oldItem='';
getElem(tId).className = "noedit";
}
function getElem(myId) {
return document.getElementById(myId);
}
//-->
</script>
<style>
.noedit { width: 300px; border: thin dotted coral; cursor: pointer; cursor: hand; }
.showedit { width: 300px; border: thin solid blue; cursor: text; }
</style>
</head>
<body>
<b>Var 1:</b><span id='var1' class="noedit" title="click here!" onclick="setEdit('var1')">Click Here!</span><br />
<b>Var 2:</b><span id='var2' class="noedit" title="click here!" onclick="setEdit('var2')">Click Here!</span><br />
<b>Var 3:</b><span id='var3' class="noedit" title="click here!" onclick="setEdit('var3')">Click Here!</span><br />
</body>
</html>