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>