ghego1 ghego1 - 17 days ago 10
Javascript Question

FormData Object not submitting via jQuery AJAX call

I'm using this script to get all values from a form, in order to prepare it for an ajax request:

function saveDataAjax(){
var fd = new FormData();
var inputs = document.getElementsByTagName('input');
for(i=0;i<inputs.length;i++) {
fd.append(inputs[i].name, inputs[i].value);
}
$.ajax({
url: '/edit.php',
data: fd,
type: 'POST',
dataType: 'html',
success: function(data){
alert(data);
}
});
}


However I'm getting a
Type error
from jQuery, and if I alert
fd['inputname']
I get undefined, so I guess I must be doing something wrong somewhere...

Firefox debuggers tells me this:
NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object @ http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js:2

Answer

Add the following to the AJAX call:

 processData: false,
 contentType: false,

So it looks like:

  $.ajax({
       url: '/edit.php',
       data: fd,
       type: 'POST',
       processData: false,  //Add this
       contentType: false, //Add this
       dataType: 'html',              
       success: function(data){
           alert(data);
       }
   });