I am constructing an array of objects from form data in order to send to a processing script that will then send the data on to an API. The API does not allow CORS ajax requests, hence the need to send to an external script first.
I can return simple strings, but when I stringify the data I have, the response from the server is always that the POST or GET (have tried both) data is just an empty array.
JS
$('#enrol').submit(function(e) {
e.preventDefault();
var collection = [];
$('#enrol .form-row').each(function() {
var email = $(this).find('input[type="email"]').val();
var c1Val = $(this).find('.c1').is(':checked') ? 'true' : 'false';
var c2Val = $(this).find('.c2').is(':checked') ? 'true' : 'false';
var c3Val = $(this).find('.c3').is(':checked') ? 'true' : 'false';
var c4Val = $(this).find('.c4').is(':checked') ? 'true' : 'false';
var c5Val = $(this).find('.c5').is(':checked') ? 'true' : 'false';
var c6Val = $(this).find('.c6').is(':checked') ? 'true' : 'false';
var c7Val = $(this).find('.c7').is(':checked') ? 'true' : 'false';
var person = {
'email' : email,
'course1' : c1Val,
'course2' : c2Val,
'course3' : c3Val,
'course4' : c4Val,
'course5' : c5Val,
'course6' : c6Val,
'course7' : c7Val,
}
collection.push(person);
});
var dataString = JSON.stringify(collection);
$.ajax({
url: 'http://www.example.com/script.php',
data: dataString,
crossDomain: true,
success: function(response) {
console.log(response);
},
error: function(response) {
console.log(response);
alert(response.responseText);
}
});
})
PHP
header("Access-Control-Allow-Origin: URLHERE");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
var_dump($_GET);
What I don't get is if I just JSON.stringify a simple string, I get the data returned, yet the array of objects seems to arrive at the php script as an empty array - or at least that's what the console.log is suggesting. I've outputted the dataString variable to ensure it has data - it does.