gandalf97
asked on
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
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
ASKER
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
Gandalf
You can store the result as preformatted text:
YOUROBJ.style.whiteSpace='
Also, use <pre> within your <textarea> tags.
-Kev
YOUROBJ.style.whiteSpace='
Also, use <pre> within your <textarea> tags.
-Kev
ASKER
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"></
<input type="button" id="btnCopy" width="60px" onclick="window.opener.btn
<input type="button" id="btnCancel" width="60px" onclick="window.opener.btn
<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
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"></
<input type="button" id="btnCopy" width="60px" onclick="window.opener.btn
<input type="button" id="btnCancel" width="60px" onclick="window.opener.btn
<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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
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
ASKER
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
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
Gandalf,
Your welcome! I'm glad I could help. Thanks for the grade, the points and the fun question.
bol
Your welcome! I'm glad I could help. Thanks for the grade, the points and the fun question.
bol
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(fieldva