How do I Maintain Whitespace When saving data from <textarea>?


My client has a form with several memo fields on it that are currently implemented as <input type="text">  The actual size ranges from 60px wide up to 500px wide.  All are a single "line".  My client wants me to put a small button or inline image next to each that will bring up a popup window with all the text from the memo field.  (That part was pretty easy and it works great.)  I am using a <textarea> in the popup and am copying the text in the textarea back to the parent window <input> when a button (in the popup) is clicked.  I am getting text to copy back but the problem is that all white space is stripped out when it gets stuffed in the input box.

Question #1.
Is there some existing javascript/dhtml solution to this problem?  I can't believe I am the first person to need something like this.

Question #2.
What can I do to get the data to go from the textarea on the popup to the input box on the form while maintaining whitespace?  I figure that when I update the database from the form that I will have to "escape" the text and then when I pull the data out and populate that field I will have to "unescape" it but, what about between the <input> on the parent and the <textarea> on the popup?

If I left something critical out, please don't hesitate to ask.  Thanks in advance for the help.

Who is Participating?
b0lsc0ttIT ManagerCommented:
No, and you can't use pre (or any other tag) in the textarea tags.  Textarea is just text, there is no formatting with style and no html is processed.  If you did put <pre> in the textarea tags then you would see that html (as text) in the textarea box on your page.

If you are trying to carry text (with line breaks, etc) to an input tag then it won't work.  You need to use a textarea tag on the destination page too.  From your comment above it sounds like it is a normal text input tag.  A text input tag can only have one line.  Spaces in the line will carry but the "whitespace formatting" (i.e. linebreaks, tabs, multiple space after the first line) won't.

Let me know more about the data (i.e. post a sample) and details on the html elements and javascript if you have any questions or need more info.

Jai STech ArchCommented:
there is no special thing that you need to do...white spa ces are by default sent thru the form submit,.,.,,
but when you are displaying the results back have to use PreserverWhiteSpace( this is in ASP find the equivalent in the server script that you are using) and sent back your results...
gandalf97Author Commented:
Thanks for your comment.  I am not doing a form submit.  I am using javascript to copy the <textarea>.value on the popup to the <input>.value on the parent.  I have object variables for both HTML elements.

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

You can store the result as preformatted text:'pre';

Also, use <pre> within your <textarea> tags.

gandalf97Author Commented:

Thanks for your comment.

My HTML for the popup looks like this:
  <body onload="test_onload();">
    <textarea id="txtBOX" rows="13" cols="45" wrap="physical" style="white-space:pre"></textarea><br><br>
    <input type="button" id="btnCopy" width="60px" onclick="window.opener.btnMemoEdit_Copy_onclick();" value="Copy Data Back to Field">&nbsp;&nbsp;
    <input type="button" id="btnCancel" width="60px" onclick="window.opener.btnMemoEdit_Cancel_onclick();" value="Cancel">
    <input type="hidden" id="hidElementId" value="<%=strElementId%>">

When I tried to put the <pre> tag immediately after the <textarea> tag and </pre> immediately before the </textarea> tag, they both showed up as text in the textarea.  Is this a quirk of IE?  I am using IE6.  If that is an issue, then I will need to take that into account to solve this problem.  I cannot change browsers.

Question: Should the 'style="white-space:pre"' work the way I have it or did I do something wrong?

gandalf97Author Commented:

Thank you for your comment.

I had already discovered what you wrote about using other tags inside the textarea.  They just came out with the text and weren't interpreted.  No surprise there.

I will try your suggestion and make the destination a textarea as well.  The data is pretty straightforward text.  It just has a bunch of line breaks in it.  The requirement is that they be able to <bad idea>"TYPE WHATEVER THEY WANT". </bad idea>  Oh well.  I'll let you know what happens with your suggestion.

gandalf97Author Commented:
Thanks to all who took the time to look at this question.  I still can't believe that there isn't some plug-in widget that has already been packaged for this.  Oh well.

To sum up, the bottom line was that I needed to change the "destination" from an <input> tag to another <textarea>.  I also did need to set the styles "white-space:pre" to keep the line breaks, spaces and tabs the way the user enters them.

Thanks Again!
b0lsc0ttIT ManagerCommented:

Your welcome!  I'm glad I could help.  Thanks for the grade, the points and the fun question.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.