www.webdeveloper.com
Results 1 to 12 of 12

Thread: FormData and the character encoding problems

  1. #1
    Join Date
    Feb 2014
    Posts
    16

    FormData and the character encoding problems

    Hi,

    I used FormData to post the data of a form to a php file. The form in the html is:

    <form id='upload' action='php_add.php' onsubmit='postdata()' method='POST' enctype='multipart/form-data'>
    <input type='text' id='name'>
    .....

    function postdata() {
    var formElements = document.getElementByID("upload");
    var url = formElement.action;
    var request = new XMLHttpRequest();
    request.open("POST", url);
    var formdata = new FormData();
    for (var name in data) {
    if (!data.hasOwnProperty(name)) continue;
    var value = data[name];
    if (typeof(value) === "function") continue;
    formdata.append(name, value);
    }
    request.send(formdata);
    }

    When I push the "submit" button in the html, I got two error messages.

    1. NS_ERROR_CANNOT_CONVERT_DAT: (nsIDOMFormData.append).
    Do I need to process inputs, like escape('input text') to get the correct input format?

    2. php_add.php
    The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.
    For this error message, I already add <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="encoding" content="utf-8">
    Also, I tried add <meta...> on the php_add.php file, but the error is still there.

    Any suggestion is very welcome! Thanks!

  2. #2
    Join Date
    Dec 2002
    Location
    Calgary, Canada
    Posts
    6,123
    I hope you have checked:
    1:formdata.append() function is forking correctly
    2:That you checked content you are trying to append to newformdata
    3:before sending the request, did u check what is the content of formdata
    4. you can set the request properties as below
    Code:
    request.open("POST", url, true);//the true parameter forces an asynchronous request(which will not lock ur browser)
    request.setRequestHeader("Accept-Encoding", "UTF-8");
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");
    //request.setRequestHeader("Connection","close");
    Cheers

    Khalid

    Message Posting Guidelines In These Forums, Please read these before posting any question.
    Web site: webapplikations.com
    Web Resources Page:Web Resources

  3. #3
    Join Date
    Mar 2011
    Posts
    1,145
    At the start of your function you declare the variable 'formElements', ie:
    Code:
    var formElements = document.getElementByID("upload");
    but in the rest of the function, you spell it 'formElement'. That's going to prevent the rest of the function from working as you intend.
    Rick Trethewey
    Rainbo Design

  4. #4
    Join Date
    Feb 2014
    Posts
    16
    Hi Khalid,

    Thank you very much for your help! I will check the formdata and let you know the result.

  5. #5
    Join Date
    Feb 2014
    Posts
    16
    Hi rtrethewey,

    Thank you very much for your help. In my program, both are formElements. Sorry for the wrong typed question and misleading.

  6. #6
    Join Date
    Feb 2014
    Posts
    16
    Hi Khalid,

    I used FormData directly without appending form elements. The code snippet is:
    <form id='upload' name='upload' action='test.php' onsubmit='postdata()' method='multipart/form-data'>
    <input type='text' id='name' name='name'/>
    ...
    <button type='submit' name='submit' >Upload File</button>
    </form>

    function postdata() {
    var formElements = document.getDocumentById("upload");
    var url = formElements.action;
    var request = new XMLHttpRequest();
    request.open("POST", url, true);
    request.send(new FormData(formElements));
    }

    My test.php is:
    <? php
    header("Content-type: text/plain");
    echo ":ata received via POST: \n\n";
    print_r($_POST);
    ...
    ?>

    The result is:
    :ata received via POST::
    Array
    {
    [name] =>ab
    [address] =>11 S
    ...
    [submit]=>
    }

    It looks ok for posting the form data to php. The only confusion is that 'submit' is null. Should the 'submit' be something instead of null?
    Any suggestion is welcome!

  7. #7
    Join Date
    Feb 2014
    Posts
    16
    i changed the submit from button type to input type. Then the [submit]=> Submit Query. Interesting.

  8. #8
    Join Date
    Dec 2002
    Location
    Calgary, Canada
    Posts
    6,123
    strange, just add value attribute such as value="Submit"
    Let me know how it goes
    Cheers

    Khalid

    Message Posting Guidelines In These Forums, Please read these before posting any question.
    Web site: webapplikations.com
    Web Resources Page:Web Resources

  9. #9
    Join Date
    Feb 2014
    Posts
    16
    Hi Khalid,

    Cool! It works when I add value attribute. Thanks!

    Jian

  10. #10
    Join Date
    Feb 2014
    Posts
    16
    Hi Khalid,

    By the way, can you explain a little bit about the difference by adding value attribute? Thanks in advance.

    Jian

  11. #11
    Join Date
    Dec 2002
    Location
    Calgary, Canada
    Posts
    6,123
    form data is posted to server by name=value
    if value is not provided it will be a null
    so you want to make sure for EVERY html form control, it must have a name and value attributes so that you can use name to capture that attribute on server side and then use its value to do whatever...
    Cheers

    Khalid

    Message Posting Guidelines In These Forums, Please read these before posting any question.
    Web site: webapplikations.com
    Web Resources Page:Web Resources

  12. #12
    Join Date
    Feb 2014
    Posts
    16
    Hi Khalid,

    I got it. Thanks!
    Jian

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles