Show Text area as plain text ?

Is there a way of toggling between plain text and textarea via an EDIT button ?
I am currently making the text area visible via javascript on EDIT, but would like to not have the redundant entry....

<button id="${editFormId}" onclick="enableQueryField('${job.jobId}');"><u>E</u>dit </button>


<td valign="top">
<TEXTAREA id="${statementFormId}" name=statement ROWS="7" COLS="65" disabled >${job.statement}
Who is Participating?
OblivionSYConnect With a Mentor Commented:
I would say the easiest way is to have:

<tr><td><div id=TextContent>Text stuff to go here</div><div style="display:none" id="TextAreaContent"><textarea>bla bla</textarea></div>

In your JS, you can then hide and show the correct thing, in the right place.

If you want to actually remove it, then you should use jQuery to manipulate the DOM itself

You could always use jQuery framework to replace the Dom elment with the textarea, but an include to this library would probably have more footprint than a few extra lines of code of hidden textbox? What is wrong with the way you're doing it now?
WaponiAuthor Commented:
The 'requestor.....' wants to see the orig text replaced by the text box in the same physical line and col.
i.e. <tr> <td>' text change to textboxhere'<t/d></tr>  on the form ....
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

>>then you should use jQuery to manipulate the DOM itself

Really? Add en entire library simply to manipulate the DOM? Even you state that "...would probably have more footprint than a few extra lines of code..."

I will certainly second that notion ;-)
jQuery is amazing, and you could do it in a few lines of code.... Just depends what the aim actually is? You'd probably write more JS to remove it, than to have it there and hide it... so if it is footprint size then, you could be writing 10kb to save 2kb.... for example...

If it was for some other reason, then the hit might be worth it...
I guess it depends on your skill - and comfort - level with JavaScript, eh?
You may refer the following example:
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script language=javascript>
	var flag=true;
	function changeIt()
		var t=document.getElementById("xx");
		if (flag)
		{"1px solid #456789";"auto";
<textarea id="xx" style="border:1px solid #456789">sdfsdfsdfM</textarea>
<input type="button" onclick="changeIt()" value="go">

Open in new window

WaponiAuthor Commented:
Thanks, thats it.
I did not realize that you could put 2 diff elements/Ids
<td><div id-1 ></div><div  id1-2></div> </td>
within the same <td></td>.
"block" to show and "none" to hide was confusing.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.