unescape() textarea field flashes escape character (%20..etc. ) before showing normal text.

Posted on 2007-03-30
Last Modified: 2008-01-09
On my HTML page, I am allowing the user to enter a 1000 character text area field.
On Submit,  I use the escape() method on the field because the data is being sent to the AS400. When returning to the page, I use an unescape() method in my onLoad function. The problem is that I get a flash of the escape characters before the noraml text appears in the textarea box. Is there anyway to prevent to this?
Question by:dyachimiak
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
  • +2
LVL 63

Expert Comment

ID: 18823141
The flash (or the visual representation) occures because you canvert the textarea value on some button click event.
To avoid that visual effects move the escape() statement from onClick event handler to form tag onSubmit event handler call.


Author Comment

ID: 18823276
My onClick event actually calls a function that does the escape, sets cookies for the AS400 to know the input and output program and html page, and then does the submit. All my submits are done in the events. Can I create a hidden field that can handle 1000 characters?

Author Comment

ID: 18823464
The onSubmit worked on the Form tag, but where do I unescape the text? I am now crashing while doing it in the OnLoad function.
Industry Leaders: 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 11

Expert Comment

ID: 18823790
Is it giving any problem if you use hidden field?

Author Comment

ID: 18823845
Before I use a hidden field, I need to know if I can create a hidden field that is 1000 characters in size.
I assume I can only create a hidden field with the input tag?
LVL 11

Expert Comment

ID: 18824127
I dont think there is size limit on hidden field. So try it.
LVL 63

Expert Comment

ID: 18824763
Form fields, hidden or not hidden, do not have a transfer limit on browser side.
Only limit that I know is for input fields of type file that do have limits how much data does the web server accept. But that are most above four megabytes, perhaps ten megabytes set in the web server config.

LVL 13

Accepted Solution

AngryBinary earned 500 total points
ID: 18826547
How is the textarea being populated with the escaped string? I imagine it would have to be assigned via either the scipt that generates the page (PHP, ASP, etc), or populated with javascript, since a static HTML page does not retain data after posting to a form.

If the text is being pushed into the text area via a server side script (as is most likely the case), then what is happening is the server is sending you the HTML page (escaped text and all), and your browser is waiting until the page has completed loading before firing the OnLoad event and transforming the text in the textarea. Essentially, you cannot prevent that little lag before the OnLoad event using your current method.

The behavior you should be shooting for is to transform the text on the server side, and have it served up unescaped by tweaking the back end script.

If that is not an option, then you can do some working around with javascript. Some designers like to style certain tags on a page as invisible by default (for instance, a DIV or even the entire BODY tag), and then in the OnLoad event make them visible by altering the style properties. This gives the impression that the entire page loads all at once (the drawback is if it takes a long time the user gets a little antsy and thinks the page isn't loading; a 'loading' message can be useful). If you were to make either your page or even just your textarea invisible via stylesheet, you can turn on the visibility of the hidden element once the appropriate transformations have been made in the OnLoad event and prevent that little page hiccup.

Another useful application of this technique is to style a page as disabled or hidden until every element has loaded, preventing premature clicking and ensuring certain data is available to javascript before any events get initiated by the user.

LVL 15

Expert Comment

ID: 18827315
Actually, <textarea> tags can be hidden, too.  Either:

<TEXTAREA NAME="comments" COLS=40 ROWS=6 style="display:none;"></TEXTAREA>

or in your CSS:

     TEXTAREA { display:none; }
LVL 13

Expert Comment

ID: 18827703
Indeed, the textarea alone could be hidden. However, some may find that a suddenly appearing text box is a bit more confusing than were an entire page to appear after loading, or a visibly dilineated segment were to pop into place.

Also, if you are showing/hiding a piece of the page rather than the entire page, it may be cleaner to use 'visibility:hidden' style instead, as the element will not be invisible but space will be maintained on the page. Jumping from 'display:none' to 'display:block' or 'display:inline' could cause the rest of the page to shift, which is also visually distracting.

Featured Post

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS question 4 52
Multiple of Image Swaps 5 39
Best explanation of following code css 11 37
Warning: mysql_num_rows() expects parameter 1 to be resource, boolean given PHP 5 33
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

736 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