asked on

Show Text area as plain text ?

Hello,
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>

<tr>
<td>${job.statement}</td>
</tr>

<td valign="top">
<TEXTAREA id="${statementFormId}" name=statement ROWS="7" COLS="65" disabled >${job.statement}
</TEXTAREA>
</td>

OblivionSY

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?

Waponi

ASKER

Thanks....
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 ....

ASKER CERTIFIED SOLUTION

OblivionSY

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Badotz

>>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 ;-)

OblivionSY

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

Badotz

I guess it depends on your skill - and comfort - level with JavaScript, eh?

KNVB HK

You may refer the following example:

<html>
<body>
<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)
		{
			t.style.border="none";
			t.style.overflow="hidden";
		}
		else
		{
			t.style.border="1px solid #456789";
			t.style.overflow="auto";
		}
		flag=!flag;
	}
</script>
<textarea id="xx" style="border:1px solid #456789">sdfsdfsdfM</textarea>
<input type="button" onclick="changeIt()" value="go">
</body>
</html>

Open in new window

Waponi

ASKER

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>.
Also,
"block" to show and "none" to hide was confusing.
Regards