Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 672
  • Last Modified:

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

Hello,

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.

Gandalf
0
gandalf97
Asked:
gandalf97
1 Solution
 
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 again...you have to use PreserverWhiteSpace( this is in ASP find the equivalent in the server script that you are using) and sent back your results...
like
PreserveWhiteSpace(fieldvalue)
0
 
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.

Gandalf
0
 
strictlykevCommented:
You can store the result as preformatted text:  

YOUROBJ.style.whiteSpace='pre';

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

-Kev
0
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!

 
gandalf97Author Commented:
Kev,

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%>">
  </body>

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?

Gandalf
0
 
b0lsc0ttCommented:
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.

bol
0
 
gandalf97Author Commented:
bol,

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.

Gandalf
0
 
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!
Gandalf
0
 
b0lsc0ttCommented:
Gandalf,

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

bol
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now