JQuery: 'Uncaught TypeError: Illegal invocation' at ajax request - several elements

Thanks to the talk with Sarfraz we could figure out the solution.

The problem was that I was passing an HTML element instead of its value, which is actually what I wanted to do (in fact in my php code I need that value as a foreign key for querying my cities table and filter correct entries).

So, instead of:

var data = {        'mode': 'filter_city',        'id_A': e[e.selectedIndex]};

it should be:

var data = {        'mode': 'filter_city',        'id_A': e[e.selectedIndex].value};

Note: check Jason Kulatunga's answer, it quotes JQuery doc to explain why passing an HTML element was causing troubles.

From the jQuery docs for processData:

processData Boolean
^{Default: true}
By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.

Source: http://api.jquery.com/jquery.ajax

Looks like you are going to have to use processData to send your data to the server, or modify your php script to support querystring encoded parameters.

I was getting this error while posting a FormData object because I was not setting up the ajax call correctly. Setup below fixed my issue.

var myformData = new FormData();        myformData.append('leadid', $("#leadid").val());myformData.append('date', $(this).val());myformData.append('time', $(e.target).prev().val());$.ajax({    method: 'post',    processData: false,    contentType: false,    cache: false,    data: myformData,    enctype: 'multipart/form-data',    url: 'include/ajax.php',    success: function (response) {        $("#subform").html(response).delay(4000).hide(1);     }});