XMLHttpRequest & FormData not submitting data

Question

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.

Answer 1

The content type when sending a FormData object is multipart/form-data not url encoded.
Further more the proper boundary must be set for the request, which the user is unable to do. For this XMLHttpRequest sets the correct content type with the required boundary.
So all you have to do is not set the content type and it'll work.

var xhr=new XMLHttpRequest();
xhr.open('post',url,true);
//xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");<--don't do this
var formData=new FormData(form);
formData.append('update', true);    // makes no difference
xhr.send(formData);
xhr.onload=function() {
    alert(this.response);
};

Answer 2

Change the name of the button to something other than "update" (and change it in your form['update'].onclick... as well). I think its clashing with the value you are trying to set on the FormData to trigger the PHP code.