Solved

Show Text area as plain text ?

Posted on 2010-11-11
8
797 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
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 3

Expert Comment

by:OblivionSY
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 29

Expert Comment

by:Badotz
Comment Utility
>>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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 3

Expert Comment

by:OblivionSY
Comment Utility
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
Comment Utility
I guess it depends on your skill - and comfort - level with JavaScript, eh?
0
 
LVL 7

Expert Comment

by:cstsang
Comment Utility
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
Comment Utility
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Introduction This article is the first of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article explains our test automation goals. Then rationale is given for the tools we use to a…
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.

771 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now