Solved

Show Text area as plain text ?

Posted on 2010-11-11
8
807 Views
Last Modified: 2013-11-11
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>
0
Comment
Question by:Waponi
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 3

Expert Comment

by:OblivionSY
ID: 34116695
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?
0
 

Author Comment

by:Waponi
ID: 34116717
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 ....
0
 
LVL 3

Accepted Solution

by:
OblivionSY earned 250 total points
ID: 34116751
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>
</td></tr>

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

0
Turn Insights Into Action

You’ve already invested in ITSM tools, chat applications, automation utilities, and more. Fortify these solutions with intelligent communications so you can drive business processes forward.

With xMatters, you'll never miss a beat.

 
LVL 29

Expert Comment

by:Badotz
ID: 34116822
>>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 ;-)
0
 
LVL 3

Expert Comment

by:OblivionSY
ID: 34116847
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...
0
 
LVL 29

Expert Comment

by:Badotz
ID: 34117131
I guess it depends on your skill - and comfort - level with JavaScript, eh?
0
 
LVL 7

Expert Comment

by:cstsang
ID: 34119348
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

0
 

Author Closing Comment

by:Waponi
ID: 34123571
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
0

Featured Post

Turn Insights Into Action

You’ve already invested in ITSM tools, chat applications, automation utilities, and more. Fortify these solutions with intelligent communications so you can drive business processes forward.

With xMatters, you'll never miss a beat.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I had a project requirement for a displaying a user workbench .This workbench would consist multiple data grids .In each grid the user will be able to see a large number of data. These data grids should allow the user to 1. Sort 2. Export the …
Introduction This article is the second of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article covers the basic installation and configuration of the test automation tools used by…
The viewer will learn how to implement Singleton Design Pattern in Java.
This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.

690 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question