What I want to implement
I implemented a subscription form for my Mail Chimp. At first, I only used PHP and it worked.
After that, I wanted to upgrade my project so that the page won't reload every time someone subscribes and in return it shows a nice image with a "thank you" message. For this job, I chose Ajax.
I followed some tutorials (from YouTube and other websites) but the form is not sending the data to Mail Chimp.
Bugs
If I click 'Subscribe' without any email entered, it behaves just like if it was a success and it displays me the 'Thank You' image.
If I enter a valid email and hit 'Subscribe' it reloads the page and after that it updates my URL with this:
https://primus2.eu/?email=toni_mol%40yahoo.com&submit=
My conclusion
I think that the PHP script is not called, because as I said above, if I submit the form with empty fields it behaves just like it was a success.
PHP Script
Which, again, it works without the Ajax 'upgrade'..
<?php
if (isset($_POST['submit'])) {
$email = $_POST['email'];
$list_id = 'hidden';
$api_key = 'hidden';
$data_center = substr($api_key,strpos($api_key,'-')+1);
$url = 'https://'. $data_center .'.api.mailchimp.com/3.0/lists/'. $list_id .'/members';
$json = json_encode([
'email_address' => $email,
'status' => 'subscribed', //pass 'subscribed' or 'pending'
]);
try {
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_USERPWD, 'user:' . $api_key);
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_POST, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_POSTFIELDS, $json);
$result = curl_exec($ch);
$status_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
if (200 == $status_code) {
echo "The user added successfully to the MailChimp.";
}
} catch(Exception $e) {
echo $e->getMessage();
}
}
?>
HTML Form
I removed the action="" and method="" from the <form> after I implemented the Ajax upgrade.
<form>
<div class="form-group pt-4" id="form-inputs">
<input type="email" name="email" id="email" placeholder="Enter your email.." required="required">
<button class="btn" name="submit" id="subscribe-btn">Subscribe</button>
<small id="emailHelp" class="form-text text-success"><i class="fa fa-check" aria-hidden="true"></i> We promise not to spam your inbox. </small>
</div>
<div class="thank-you-image" id="thank-you-subscription">
<img src="assets/img/subscribe_success.png" alt="subsribe_success">
</div>
</form>
Ajax Script
Which is in the bottom of the same file with my HTML code.
<!-- Script to manage subscription form
Using AJAX -->
<script type="text/javascript">
$(document).ready(function(){
//Hide the thank you for subscription div
$('#thank-you-subscription').hide();
$('#subscribe-btn').click(function(){
var email = $('#email').val();
$.ajax({
url: "assets/php/subscribe-mailchimp.php",
method: "POST",
data: {
email:email
},
success:function(){
$('#form-inputs').fadeOut('slow'); //Hides the form
$('#thank-you-subscription').fadeIn('slow'); // Makes the thank you div appear
}
});
});
});
</script>
