• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2592
  • Last Modified:

How to paste special characters into a form text field.

I have numerous html forms where scientists paste abstract/summaries of their research into a textarea field for peer review. Unfortunately, they use many special characters (greek letters, scientific notation, etc) that are available in their word processing programs, but which get lost in translation into the html form textarea field. This is causing much grief!

Example: use MSWORD to write the following statement -- "The symbol of Pi is (symbol of Pi here)." Now paste that statement into an html form textarea field, and watch the Pi symbol turn into a generic open square (as all special characters do).

I don't know how to solve this, and would greatly appreciate any hints, clues or solves.

TIA
-mupledge

   
0
mupledge
Asked:
mupledge
  • 5
  • 4
  • 3
  • +2
1 Solution
 
seanpowellCommented:
The only way I know to get around this is by using the character code, in your example it would be "Π" instead of the pi character. But that's pretty cumbersome...
0
 
ZontarCommented:
What's the charset for your page? Try adding a

<meta http-equiv="Content-Type" value="text/html; charset=utf-8">

to the page. And make sure your scientists are using that charset (Arial Unicode MS font) in their Word docs as well. See "Unicode" in the MS Word Help for more info.
0
 
ZontarCommented:
Other solutions would be to write a converter script that they could upload text files to that would do the replacements. Or if you're using Dreamweaver, you might be able to write a custom extension for it that would let them pick the symbols out from a menu and automatically insert the equivalent entities into an HTML doc.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
mupledgeAuthor Commented:
I appreciate the suggestions. Changing the charset to utf-8 was a good idea, though it does not solve the problem.

To restate in more detail: Various scientists apply for speaking times at conferences through my office. Everyone wants to do it online now. But, they use diverse word processing programs in creating their abstract submissions, and when they paste those into an online html form, many special characters are lost.

I cannot ask the submitters to write the html numeric or character entities -- they just copy and paste, then submit the form. I have thought of writing a translation block in javascript, but the problem appears that the html form doesn't get the special characters from the word processing format in the first place. Or am I wrong there, and just need to figure out how to decode those characters...

Stil looking for the magic answer, and thank those that have responded thus far.

 

 

0
 
ZontarCommented:
I've just tested my hypothesis and it appears to be correct. This will work, but

1. The charset of the HTML page containing the textarea MUST be UTF-8.

2. The charset being used in the word processor MUST be UTF-8.

A better solution might to have them upload their abstracts files for conversion on the server -- but it would have to be a Windows server.
0
 
ZontarCommented:
Another thought -- I know that Mozilla can read MathML, but I have no idea what it's editing capabilities are in that regard.

Amaya can do some MathML editing -- http://www.w3.org/Amaya/
0
 
jarasaCommented:
Hi.
Why don't you just let them to attach the Word file?
That wil solve your problem for sure. :c)
Regards.
Javier
0
 
GwynforWebCommented:
Try this. Copy a few letters out of word highlight the text on the HTML page press preview, pressing ConvertHTML will give you the equvalent html in the text area. Problem is the amount of html is huge, but may be OK. I have shown the amount necessary for sigma on the page which is much less than word generates. It may be possible to edit out the spurious stuff using regex. (Word converts to fonts not the codes unfortunately)  

<table id="t1">
<tr>
<td id="c1">&nbsp; &nbsp Highlight This &nbsp
</td>
</tr>
</table>
<form id="f1">
<input type="button" value="preview" onclick="document.execCommand('Paste')"><p>
<textarea rows='10' cols=80 id="abstract"></textarea>
<input type="button" value="convertHTML" onclick="getElementById('f1').abstract.value=getElementById('t1').rows[0].cells[0].innerHTML">                                    
</form>
<SPAN style="FONT-SIZE: 12pt; FONT-FAMILY: Symbol;">S</SPAN>
0
 
GwynforWebCommented:
Are you still interested in this question cause I have seen how to do it?
0
 
mupledgeAuthor Commented:

Yes, I'm still interested.
0
 
GwynforWebCommented:
mupledge,
   This does it, the user can edit the box content as well. I have  set the action to GET so you can see what gets sent, you will change it to POST for the final App.The problem with your design is that Word docs and many other types generate a very large amount of HTML. It may be OK and there are ways of editing out the extra stuff.

<script>
function sendSpan(){
 theHTML = document.getElementById("theContent").innerHTML;
 theForm = document.getElementById("MyForm");
 theForm.newText.value = theHTML;
 theForm.submit();
}
</script>
</head>
<body>


<form action="http://google.com" id="MyForm" action="get">
<p><input type=hidden name="newText">
<input type=button value=Send onClick="sendSpan()"></P>
</form>
Paste Document here
<table  border=1 height=40% width=95% align="center"><tr><td>
<span id="theContent" contentEditable style="height: 100%; width: 100%;"></span>
</td></tr></table>
0
 
mupledgeAuthor Commented:
GwynforWeb,

This solution works well using IE, but I couldn't get the text box to work with either mozilla or Opera. Any thoughts on that?

In any event, this appears to be the best solution to the problem, so I will close this question. I appreciate all the suggestions and help.
0
 
ZontarCommented:
The solution I posted will work in MSIE, Moz, and Opera.

Of course, it's not clueless-user-proof, I'm afraid.

(contentEditable has no analogue in the other two browsers, which is why I didn't suggest it.)
0
 
GwynforWebCommented:
My Date: 11/21/2003 10:04PM PST post does work crossbrowser but need a bit of work on its interface. Thx for the points. GfW
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 5
  • 4
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now