How to paste special characters into a form text field.

Posted on 2003-11-20
Last Modified: 2013-12-03
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.


Question by:mupledge
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
  • 5
  • 4
  • 3
  • +2
LVL 31

Expert Comment

ID: 9791146
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...
LVL 11

Expert Comment

ID: 9791553
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.
LVL 11

Expert Comment

ID: 9791633
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.
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.


Author Comment

ID: 9795891
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.



LVL 11

Expert Comment

ID: 9796069
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.
LVL 11

Expert Comment

ID: 9796088
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 --

Expert Comment

ID: 9796484
Why don't you just let them to attach the Word file?
That wil solve your problem for sure. :c)
LVL 31

Expert Comment

ID: 9801821
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">
<td id="c1">&nbsp; &nbsp Highlight This &nbsp
<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">                                    
<SPAN style="FONT-SIZE: 12pt; FONT-FAMILY: Symbol;">S</SPAN>
LVL 31

Expert Comment

ID: 9829953
Are you still interested in this question cause I have seen how to do it?

Author Comment

ID: 9831557

Yes, I'm still interested.
LVL 31

Accepted Solution

GwynforWeb earned 250 total points
ID: 9832899
   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.

function sendSpan(){
 theHTML = document.getElementById("theContent").innerHTML;
 theForm = document.getElementById("MyForm");
 theForm.newText.value = theHTML;

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

Author Comment

ID: 9840051

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.
LVL 11

Expert Comment

ID: 9840902
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.)
LVL 31

Expert Comment

ID: 9843257
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

Featured Post

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!

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

695 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