Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Show Text area as plain text ?

Posted on 2010-11-11
8
Medium Priority
?
809 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 1000 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Introduction This article is the last of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article covers our test design approach and then goes through a simple test case example, how …
A solution for Fortify Path Manipulation.
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.
Suggested Courses

636 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