XMLHttpRequest & FormData not submitting data

Viewed 6110

I am trying to submit a form via ajax using the post method and a FormData object.

Here is a simplified version of the JavaScript:

var form=…; //  form element
var url=…;  //  action
form['update'].onclick=function(event) {    //  button name="update"
    var xhr=new XMLHttpRequest();
        xhr.open('post',url,true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    var formData=new FormData(form);
        formData.append('update', true);    // makes no difference
    xhr.send(formData);
    xhr.onload=function() {
        alert(this.response);
    };
};

The form has:

  • a button (type="button" name="update") to run the script
  • no action and method="get"

My PHP script has the following:

if(isset($_POST['update'])) {
    print_r($_POST);
    exit;
}

//  more stuff

print 'other stuff';

When I try it, the PHP falls through to the rest of the code, and I get the other output, rather than what I expect from the print_r statement.

I have tried the following variations:

  • new FormData() (without the form). This does work if I add the update data manually.
  • new FormData(form). This does not work, whether I add the update manually or not.
  • changing the form method to post.
  • Firefox, Safari & Chrome on MacOS; all current versions.

The from itself looks something like this:

<form id="edit" method="post" action="">
    <p><label for="edit-summary">Summary</label><input id="edit-summary" name="summary" type="text"></p>
    <p><label for="edit-description">Description</label><input id="edit-description" name="description" type="text"></p>
    <p><label for="edit-ref">Reference</label><input id="edit-ref" name="ref" type="text"></p>
    <p><label for="edit-location">Location</label><input id="edit-location" name="location" type="text"></p>
    <p><button type="button" name="update">OK</button></p>
</form>

What should I do to submit the get this to work?

No jQuery, please.

2 Answers
Related