Solved

How to paste special characters into a form text field.

Posted on 2003-11-20
14
2,588 Views
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.

TIA
-mupledge

   
0
Comment
Question by:mupledge
[X]
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
14 Comments
 
LVL 31

Expert Comment

by:seanpowell
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...
0
 
LVL 11

Expert Comment

by:Zontar
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.
0
 
LVL 11

Expert Comment

by:Zontar
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.
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!

 

Author Comment

by:mupledge
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.

 

 

0
 
LVL 11

Expert Comment

by:Zontar
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.
0
 
LVL 11

Expert Comment

by:Zontar
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 -- http://www.w3.org/Amaya/
0
 
LVL 6

Expert Comment

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

Expert Comment

by:GwynforWeb
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">
<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
 
LVL 31

Expert Comment

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

Author Comment

by:mupledge
ID: 9831557

Yes, I'm still interested.
0
 
LVL 31

Accepted Solution

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

Author Comment

by:mupledge
ID: 9840051
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
 
LVL 11

Expert Comment

by:Zontar
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.)
0
 
LVL 31

Expert Comment

by:GwynforWeb
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
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
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ā€¦
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

730 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