Ajax Success Function Being Ignored - Code Still Runs

Question

I'm trying to post a segment to mail chimp accounts via AJAX. If the call is successful, I want to redirect to a URL. After much testing, the calls are successful every time, but I can't get a redirect...it's as if the code runs and then skips past the if "result = success", and goes right to my else statement which is just an alert. When I view the data being returned I get "nullsuccess". I've even tried if result = "nullsuccess" and it still goes right for the else statement.

$("#mc-embedded-subscribe-form").submit(function(e) {   
    var url = $(this).prop('action'); // the script where you handle the form input.
        $.ajax({
            type: "POST",
            url: "update-member.php",
            data: $("#mc-embedded-subscribe-form").serialize(), // serializes the form's elements.
            dataType: "text",
            success: function(data){
                if(data.result == 'success'){
                    window.location.href = 'https://google.com';
                }else{
                    alert("ERROR-ONLY IT STILL SUBMITS DATA!");
                }
            }
        });        
    e.preventDefault(); // avoid to execute the actual submit of the form.
});

Above for dataType - I've used "text" because if I use "json" or "jsonp", it completely ignores the success function, both if and else statements. Funny thing is all three data types will still post the data successfully.

And here is the PHP(update-member.php)

$apikey = 'myAPIKEYHERE';
            $auth = base64_encode( 'user:'.$apikey );    
            $data = array(
                'apikey'        => $apikey,
                'email_address' => $_POST['email_address'],
                'status'        => 'subscribed',
                'merge_fields'  => array(

                )                   
            );

            $json_data = json_encode($data);

            $ch = curl_init();
            curl_setopt($ch, CURLOPT_URL, 'MYMAILCHIMPURL');
            curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json','Authorization: Basic '.$auth));
            curl_setopt($ch, CURLOPT_USERAGENT, 'PHP-MCAPI/2.0');
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($ch, CURLOPT_TIMEOUT, 10);
            curl_setopt($ch, CURLOPT_POST, true);
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
            curl_setopt($ch, CURLOPT_POSTFIELDS, $json_data);  

            echo json_encode($response_array);                                                                                                                

            $result = curl_exec($ch);
            $message = curl_errno($ch) === CURLE_OK ? 'success' : 'failure';
            echo $message; //echos nullsuccess

I feel like I'm not returning something right from update-member.php, or I'm not gathering it properly in my ajax success function.

Answer 1

That is because you might have not set result = success. By default it is already in success function. You have to set as below in the server side.

$data['result'] = 'success';

and in ajax you'll have to set the dataType as 'json'

$("#mc-embedded-subscribe-form").submit(function(e) {   
    var url = $(this).prop('action'); // the script where you handle the form input.
        $.ajax({
            type: "POST",
            url: "update-member.php",
            data: $("#mc-embedded-subscribe-form").serialize(), // serializes the form's elements.
            dataType: "json", //CHANGED
            success: function(data){
                if(data.result == 'success'){
                    window.location.href = 'https://google.com';
                }else{
                    alert("ERROR-ONLY IT STILL SUBMITS DATA!");
                }
            }
        });        
    e.preventDefault(); // avoid to execute the actual submit of the form.
});

Answer 2

As discussed in the comments, your PHP is echoing 2 things:

echo json_encode($response_array);
// ...
echo $message;

So that script returns 2 strings, concatenated - which explains the strange looking nullsuccess you are seeing. Get rid of the first echo, so that you are only returning your single, plain text status word.

The next problem is in your Javascript. You have specified that your AJAX call will return some text:

dataType: "text",

And in fact it does - a plain text success, or failure status message. But when it comes to using that response, your code is treating it like JSON:

if(data.result == 'success'){

data is your plain text response/status message, it has no .result property. It is just text, so change that to:

if(data === 'success'){

Update

Here's a simplified, working version of your code. I set this up locally and verified it works. The only things I have done are what I describe above - to make sure dataType matches what the PHP returns, and to make sure the JS treats it that way when it gets it. In this case it is text all the way.

Copy this code and try it. Enter "a@a.com" in your email field to test the success response, and anything else to test the failure.

Javascript

$("#mc-embedded-subscribe-form").submit(function(e) {   
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "update-member.php",
        data: $("#mc-embedded-subscribe-form").serialize(),
        dataType: "text",  // <-- WE EXPECT TO GET TEXT BACK
        success: function(data) {
            // Check what your PHP returns, make sure no newlines
            console.log(data);
            if (data === 'success') {  // <-- TREAT WHAT WE GOT AS TEXT
                window.location.href = 'https://google.com';
            } else {
                alert("Error");
            }
        }
    });        
});

PHP

<?php
// The problems you are having are unrelated to the Mailchimp processing,
// so let's simplify it to get the JS side working.  Make sure you have 
// no blank lines before or after your opening/closing PHP tags, as 
// they will show up in the output, and your JS would then see something
// like "\nsuccess" for example.  Also make sure nothing else in your PHP
// generates any output.
// WE RETURN TEXT
echo ($_POST['email_address'] === 'a@a.com') ? 'success' : 'failure';
?>

If you try this and it does not work, you have another problem somewhere. Open up your browser's dev tools, and check the console. Look at the network requests and view the POST.

To address some of your comments:

• You are over-complicating things by tweaking random unrelated parts of the problem. In this particular problem, there are just a few remaining parts you need to align (you have the other parts working already):

  1) If you tell your JS that your PHP is going to return text, it must return text.

  2) If you tell your JS that your PHP is going to return text, your JS must then treat what your PHP returns as text.

  That's it. There is really nothing more to it.

• GET vs POST: convention and standards are to use GET to retrieve and view data, and POST to change data. You are subscribing an email address - that's a change, and you should use POST.

  GET or POST will have no, none, zero effect on what your PHP returns, whether it runs OK, or what dataType you should use. They are unrelated pieces of the puzzle (though that does not mean it does not matter what you use).