S
Spizzat2
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.
text=like+%93that%94+ok
When I try to submit via AJAX, I use encodeURIComponent() on the text
value. This results in the parameters looking like this:
ext=like%20%E2%80%9Cthat%E2%80%9D%20fails
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.
<html>
<head>
<script type="text/JavaScript">
function submitForm(){
var f = document.getElementById('sform');
if(f.sub_method.value=='POST' || f.sub_method.value=='GET'){
f.method=f.sub_method.value;
return true;
}else if(f.sub_method.value=='A-GET' || f.sub_method.value=='A-
POST'){
var cb = function(result){
var p = document.getElementById('pre');
if(p){
removeChildren(p);
if(result.xmlDoc){
p.innerHTML = result.xmlDoc.responseText;
}else if(result.responseText){
p.innerHTML = result.responseText;
}
}
}
var params = serializeForm(f);
if(f.sub_method.value=='A-GET'){
new Ajax.Request(page_name+'?ajax=GET&'+params, {
method:'get',
encoding:'UTF-8',
onSuccess:cb
});
}else{
new Ajax.Request(page_name, {
method:'post',
encoding:'UTF-8',
parameters:'ajax=POST&'+params,
onSuccess:cb
});
}
}
return false;
}
</script>
</head>
<body>
<form onsubmit="try{return submitForm();}catch(e){alert(e);}return
false;" id="sform" method="post">
<div>
<span class="input_label">
Submit method
</span>
<span>
<select id="sub_method">
<optgroup label="Standard">
<option value="POST">Post</option>
<option value="GET">Get</option>
</optgroup>
<optgroup label="AJAX">
<option value="A-POST">Ajax Post</option>
<option value="A-GET">Ajax Get</option>
</optgroup>
</select>
</span>
</div>
<div>
<span class="input_label">
Sample text
</span>
<span>
<textarea name="text"></textarea>
</span>
</div>
<div class="center">
<input type="submit" value="Submit" /> <input type="reset"
value="Reset" />
</div>
</form>
<pre id="pre"></pre>
</body>
</html>
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.
http://www.codeproject.com/Articles/34481/Posting-Unicode-Characters-via-AJAX
Any thoughts? Thanks in advance.
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.
text=like+%93that%94+ok
When I try to submit via AJAX, I use encodeURIComponent() on the text
value. This results in the parameters looking like this:
ext=like%20%E2%80%9Cthat%E2%80%9D%20fails
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.
<html>
<head>
<script type="text/JavaScript">
function submitForm(){
var f = document.getElementById('sform');
if(f.sub_method.value=='POST' || f.sub_method.value=='GET'){
f.method=f.sub_method.value;
return true;
}else if(f.sub_method.value=='A-GET' || f.sub_method.value=='A-
POST'){
var cb = function(result){
var p = document.getElementById('pre');
if(p){
removeChildren(p);
if(result.xmlDoc){
p.innerHTML = result.xmlDoc.responseText;
}else if(result.responseText){
p.innerHTML = result.responseText;
}
}
}
var params = serializeForm(f);
if(f.sub_method.value=='A-GET'){
new Ajax.Request(page_name+'?ajax=GET&'+params, {
method:'get',
encoding:'UTF-8',
onSuccess:cb
});
}else{
new Ajax.Request(page_name, {
method:'post',
encoding:'UTF-8',
parameters:'ajax=POST&'+params,
onSuccess:cb
});
}
}
return false;
}
</script>
</head>
<body>
<form onsubmit="try{return submitForm();}catch(e){alert(e);}return
false;" id="sform" method="post">
<div>
<span class="input_label">
Submit method
</span>
<span>
<select id="sub_method">
<optgroup label="Standard">
<option value="POST">Post</option>
<option value="GET">Get</option>
</optgroup>
<optgroup label="AJAX">
<option value="A-POST">Ajax Post</option>
<option value="A-GET">Ajax Get</option>
</optgroup>
</select>
</span>
</div>
<div>
<span class="input_label">
Sample text
</span>
<span>
<textarea name="text"></textarea>
</span>
</div>
<div class="center">
<input type="submit" value="Submit" /> <input type="reset"
value="Reset" />
</div>
</form>
<pre id="pre"></pre>
</body>
</html>
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.
http://www.codeproject.com/Articles/34481/Posting-Unicode-Characters-via-AJAX
Any thoughts? Thanks in advance.