i'm trying to build some Ajax form that a user can click on the text and he can change it directly. it worked fine, however the code get damaged when there is ' or ) in the text.

problem 1: the code get damaged from the user text even after using the function escape()

Code HTML4Strict:
<h1 id="h1-23" onclick="return designTitle('hdr','h1-23','23')" style="font-size: large; text-align: center;"><span onmouseover="this.className = 'on'" onmouseout="this.className='off'">hdr</span></h1>

Code JavaScript:
function designTitle( dname , idname , designid )
	$(idname).innerHTML = "<form name=\"dtitlechange\" method=\"get\"><input type=\"text\" onFocus=\"this.select()\" name=\"desname\" value=\""+dname+"\" /><input type=\"button\" name=\"button\" value=\"chnage\" onclick=\"javascript:designTitleChange('"+designid+"',"+escape('dtitlechange.desname.value')+");\" /><input type=\"button\" name=\"button\" value=\"cancel\" onclick=\"javascript:cancelIT('"+idname+"','"+escape(dname)+"');\" />";
function cancelIT( idname , name  )
	$(idname).innerHTML = unescape(name);
function designTitleChange( designid , designname )
	var doit = new Ajax.Request( 'design.php' , {method: 'get' , parameters: 'action=changetitle&dtitle=' + designname + '&did=' + designid , onLoading: sayWait , onComplete: showresponse} );

problem 2: something strange happens to the input, you cannot select all the text easily. even when you click change the old text get back to the input ( however the action will be done successfully ). what i mean is, the form don't act normal.

any one can help me please ?

Thank you in advance