AJAX vs form submission (character encoding)



I have a form that I'm trying to submit via AJAX. Everything works
great until someone copies their text out of Word and tries to submit
those silly open/close curly quotes (“/”). Obviously, it's not just
those characters that are causing the problem, but it's the best
example I have.
Now, if you submit the form normally, it encodes them in kind of an
interesting fashion.
The post parameters look like this in firebug.

When I try to submit via AJAX, I use encodeURIComponent() on the text
value. This results in the parameters looking like this:

The text from the regular form submission looks normal when the text
is spit back to the page. The text from the AJAX request does not.

I realize this is all due to character encodings, but I refuse to
believe that something as basic as encodeURIComponent() can't handle
what a basic form submit can.
Is there something I have to change about the form? Is there something
I'm not doing with the AJAX request?
I just want these two methods to work the same way.

Unfortunately, I can't post a url.
Here's some test code that should get you started. It's basically what
I've been using to test the issue.
<script type="text/JavaScript">
function submitForm(){
var f = document.getElementById('sform');
if(f.sub_method.value=='POST' || f.sub_method.value=='GET'){
return true;
}else if(f.sub_method.value=='A-GET' || f.sub_method.value=='A-
var cb = function(result){
var p = document.getElementById('pre');
p.innerHTML = result.xmlDoc.responseText;
}else if(result.responseText){
p.innerHTML = result.responseText;
var params = serializeForm(f);

new Ajax.Request(page_name+'?ajax=GET&'+params, {
new Ajax.Request(page_name, {
return false;
<form onsubmit="try{return submitForm();}catch(e){alert(e);}return
false;" id="sform" method="post">
<span class="input_label">
Submit method
<select id="sub_method">
<optgroup label="Standard">
<option value="POST">Post</option>
<option value="GET">Get</option>
<optgroup label="AJAX">
<option value="A-POST">Ajax Post</option>
<option value="A-GET">Ajax Get</option>
<span class="input_label">
Sample text
<textarea name="text"></textarea>
<div class="center">
<input type="submit" value="Submit" /> <input type="reset"
value="Reset" />
<pre id="pre"></pre>

To hopefully save you a little bit of research...
These are the characters in question. I can see that the %93 and %94
come from the ASCII representation, but there are 3 different ASCII
values listed for it, and I don't have a clue how I would get them in
JavaScript (the corresponding JavaScript charCode is 201C, which seems
to have no relation to the ASCII value). http://www.tachyonsoft.com/uc0020.htm#U201C

This is the closest thing I could find by googling. In fact, it seems
to be my exact problem, but his solution doesn't seem to work for me.
By "doesn't work", I mean that it returns "201C;" for the character,
which I was able to get to on my own. I want to know how to get %93
and make it work like the regular form submission.

Any thoughts? Thanks in advance.



Ross McKay

Any thoughts? Thanks in advance.

Ensure that your HTML page is being sent / interpreted as UTF-8 so that
there isn't any room for character code misinterpretation.



Hans-Georg Michna

Any thoughts? Thanks in advance.
Ensure that your HTML page is being sent / interpreted as UTF-8 so that
there isn't any room for character code misinterpretation.

I'd like to second this. The encodings given as examples look
like encoded UTF-8. They are, as such, correct. Using UTF-8 is
also the best way to avoid trouble while allowing Unicode, if
done right.


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question