Member Avatar for FlashCreations

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!!

  • 2 Contributors
  • 2 Replies
  • 134 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by FlashCreations
Member Avatar for essential

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>
commented: Great JavaScript Help!!! +1
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.