Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #10614 > unrolled thread

AJAX vs form submission (character encoding)

Back to article view | Back to comp.lang.javascript

Contents

  AJAX vs form submission (character encoding) Spizzat2 <spizzat2@gmail.com> - 2012-01-26 14:52 -0800
    Re: AJAX vs form submission (character encoding) Ross McKay <au.org.zeta.at.rosko@invalid.invalid> - 2012-01-27 11:33 +1100
      Re: AJAX vs form submission (character encoding) Hans-Georg Michna <hans-georgNoEmailPlease@michna.com> - 2012-01-29 12:36 +0100

#10614 — 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.
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.

[toc] | [next] | [standalone]

#10620

On Thu, 26 Jan 2012 14:52:51 -0800 (PST), Spizzat2 wrote:

>[...]
>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.
-- 
Ross McKay, Toronto, NSW Australia
"Let the laddie play wi the knife - he'll learn"
- The Wee Book of Calvin

[toc] | [prev] | [next] | [standalone]

#10716

On Fri, 27 Jan 2012 11:33:55 +1100, Ross McKay wrote:

>On Thu, 26 Jan 2012 14:52:51 -0800 (PST), Spizzat2 wrote:

>>[...]
>>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.

Hans-Georg

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web