Javacadabra Javacadabra - 1 month ago 5
Ajax Question

Receiving response from PHP via AJAX

I am trying to send information from a form on my website to a

PHP
script using
Ajax
. However each time I try to submit the form I get no response back from the script on the server. I don't know what I'm missing and I'd appreciate any help.

This is my
HTML
:

<form method='post' action='<?= get_template_directory_uri() ?>/mailchimp.php'>
<input type='text' name='email'/>
<input type='submit' name='submit' value='Subscribe'/>
</form>


This is my
PHP
:

session_start();
if(isset($_POST['submit'])){
$email = $_POST['email'];
if(!empty($email) && !filter_var($email, FILTER_VALIDATE_EMAIL) === false){
// MailChimp API credentials
$apiKey = 'xxx-xxx';
$listID = 'xxxxxxx';

// MailChimp API URL
$memberID = md5(strtolower($email));
$dataCenter = substr($apiKey,strpos($apiKey,'-')+1);
$url = 'https://' . $dataCenter . '.api.mailchimp.com/3.0/lists/' . $listID . '/members/' . $memberID;

// member information
$json = json_encode([
'email_address' => $email,
'status' => 'subscribed'
]);

// send a HTTP POST request with curl
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_USERPWD, 'user:' . $apiKey);
curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'PUT');
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_POSTFIELDS, $json);
$result = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);

echo "<h1>Success</h1>";
}
}


This is my
JQuery
:

jQuery('form').submit(function (event) {

console.log('submitting...')

//1. Get the form Data
var formData = {
'email': jQuery('input[name=email]').val()
}

console.log("DATA FROM FORM:")
console.log(formData);

//2. Process the form
jQuery.ajax({
type: 'POST', //Type of HTTP request
url: 'mailchimp.php', //URL to POST
data: formData //Data from form
}).done(function (data) {
console.log("RESPONSE: " + data);
});

//3. Stop the form from submitting in usual manner
event.preventDefault();
});


I've checked my console and I can see no errors from the
JS
. I see this:

submitting...
DATA FROM FORM:
Object {email: "xyz@domain.com"}
RESPONSE:


I've also checked my network requests and I can see that I've requested the
PHP
script and it's sent a 200 reponse back so I am hitting the script - however I am not seeing any Response data.

*Also please note - I know in my above PHP code I don't check the
$httpCode
variable. I will be implementing this. I just want to get the scripts talking to eachother first.

Answer

That happen because your condition :

if(isset($_POST['submit'])){

Will never reach since you don't sent the submit parameter in your POST request you send just the email.

So remove the condition or replace it by isset($_POST['email']), or also you could add the submit parameter to your formData.

To make sure that the request sent to the right route try to comment all the code and add an echo (e.g echo "<h1>Test</h1>";) and check if it will be logged.

Hope this helps.