Hello,
I am creating a feature for a site, that when you click a button changes specified text to a textbox that lets you edit the text. When the user presses enter, the textbox will dissapear and the text typed will be in it's place. This is so I don't have to a PHP script a bunch of times. The Javascript uses AJAX to submit that data and the page doesn't refresh. My problem is with the second step. The text will change to the textbox, but the onKeyPress teg is not displaying right. It should look like this:

onKeyUp="SDcheck(event, 'test', this)"

Yet it actually looks like this:

onKeyUp="SDcheck(event, " value=test")"

Here is my code:

<script type="text/javascript">
function EditBox(box, box2)
{
	var textP = document.getElementById(box);
	var text = textP.innerHTML;
	textP.innerHTML = "<input type=\'text\' value=\'"+text+"\' id=\'"+box2+"B\' onKeyPress=\'SDcheck(event,\'"+box2+"\',this)\' />"
	document.getElementById(box+'B').focus();
}
function SDcheck(even, id, element)
{
	var characterCode;
	if(e && e.which){
		e = e;
		characterCode = e.which;
	}
	else{
		e = event;
		characterCode = e.keyCode;
	}
	if(characterCode == 13){
		var text = element.value;
		document.getElementById(id).innerHTML = text;
		return false;
	}
	else{
		return true
	}				
}
</script>
<span id="test">Test</span> <a href="javascript:EditBox('test');">Edit</a>

Please Help me correct this problem!!!
Thanks!!

It's better if we will use the onchange event for this function!
Here's the code:

<html>
<head>
<title><!-- Sample --></title>

<script type="text/javascript">
<!--
function editBox(id,name,e)
{ e = e ? e : window.event;
  t = e.target ? e.target : e.srcElement;
  thisValue = document.getElementById(id);
  if ((t.name) && (t.name == name)) { 
thisValue.outerHTML = '<input type="text" id="nid" name="txt1" onchange="editBox(\'nid\',this.name);" size="20" value="' + thisValue.innerText + '" />'; t.outerHTML = '<a id="lnk1" name="sample"></a>'; } if ( t.name && t.name == 'txt1' && t.id == 'nid' ) { 
thisValue = document.getElementById(id); 
thisValue.outerHTML = '<span id="test">' + t.value + '</span>'; 
document.getElementById('lnk1').outerHTML = '<a name="nav" href="javascript:void(0);" onclick="editBox(\'test\',this.name)" style="text-decoration: none; text-align: center; background: orange; color: #FFF; border: 1px solid #CCC;">&nbsp;&nbsp;Edit!&nbsp;&nbsp;</a>';   }
}
// -->
</script>
</head>
<body>
<p>
<span id="test">Test</span><br /><br />

<a name="nav" href="javascript:void(0);" onclick="editBox('test',this.name)" style="text-decoration: none; text-align: center; background: orange; color: #FFF; border: 1px solid #CCC;">&nbsp;&nbsp;Edit!&nbsp;&nbsp;</a>
</p>
</body>
</html>
Comments
Great JavaScript Help!!!
This question has already been answered. Start a new discussion instead.