AJAX vs form submission (character encoding)

Discussion in 'Javascript' started by Spizzat2, Jan 26, 2012.

  1. Spizzat2

    Spizzat2 Guest

    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.
     
    Spizzat2, Jan 26, 2012
    #1
    1. Advertisements

  2. Spizzat2

    Ross McKay Guest

    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
     
    Ross McKay, Jan 27, 2012
    #2
    1. Advertisements

  3. 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
     
    Hans-Georg Michna, Jan 29, 2012
    #3
    1. Advertisements

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Leon Shaw

    (onetime) Form Submission

    Leon Shaw, Aug 15, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    485
  2. Boban Dragojlovic

    duplicate form submission

    Boban Dragojlovic, Feb 2, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    739
    Boban Dragojlovic
    Feb 3, 2004
  3. raavi
    Replies:
    2
    Views:
    1,119
    raavi
    Mar 2, 2006
  4. boney
    Replies:
    2
    Views:
    712
  5. stuart
    Replies:
    0
    Views:
    468
    stuart
    Feb 19, 2007
  6. minnie
    Replies:
    1
    Views:
    1,101
    Andrew Thompson
    Dec 13, 2006
  7. Jared
    Replies:
    5
    Views:
    525
    Jared
    Jul 10, 2003
  8. Replies:
    0
    Views:
    495
Loading...