CODEWITHSUNDEEP
phpjqueryajax
Lugifah
Lugifah

Reputation: 79

Catch PHP file response in AJAX

The title says it all, i need to validate data and allow user to go to the next step in my modal. I'm sending an AJAX request to a PHP file. How the PHP file should look to return the data? 

        <script type="text/javascript">
            $('#reg_btn').on('click', function(){
              $.ajax({
                      type: "POST",
                      url: 'checksubscriber.php',
                      dataType: 'json',
                      data: {
                        email: $('# .email').val(),
                      },
                      success: function(response) {
                        // User has been successfully subscribed
                        // Do something here
                      },
                      error: function (jqXHR, textStatus, errorThrown) {

                  }

                    });

                    e.preventDefault();
                    return false;
                });
    </script>

Checksubscriber.php

        <?php
    require("vendor/autoload.php");

    use \DrewM\MailChimp\MailChimp;
    $mc = new MailChimp('api_key_goes_here'); 

    $email = $_POST['email'];
    $subscriber_hash = $mc->subscriberHash($email);

    $response = [];
    $list_id = 'list_id_goes_here';

    $resp = $mc->get("/lists/$list_id/members/$subscriber_hash";

    if ($mc->success()) {

        // User successfully subscribed - set HTTP status code to 200
        http_response_code(200);
    } else {

        // User not subscribed - set HTTP status code to 400
        http_response_code(400);
    }

    // Return json-formatted response
    echo json_encode($response); 
    ?>

HTML + JS of the modal

    <button type="submit" onclick="document.getElementById('id01').style.display='block'" > HERE IS MY BUTTON </button>
    <!-- multistep form -->
    <div id="id01" class="modalx modalx-style_set">
    <form id="msform">
    <!-- progressbar -->
    <ul id="progressbar">
    <li class="active">LOG IN</li>
    <li>TERMS</li>
    <li>INFO</li>
    </ul>
    <!-- fieldsets -->
    <fieldset>
    <input type="text" name="email" placeholder="Email" />
    <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
    <input type="text" name="address" placeholder="Complete address" />
    <input type="button" name="previous" class="previous action-button" value="Back" />
    <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
    <input type="button" name="previous" class="previous action-button" value="Back" />
    </fieldset>
    </form>

        <script>
//jQuery time
   $(document).ready(function(){
     var modalx = document.getElementById('id01');

     // When the user clicks anywhere outside of the modal, close it
     window.onclick = function(event) {
         if (event.target == modalx) {
             modalx.style.display = "none";
         }
     }

   var current_fs, next_fs, previous_fs; //fieldsets
   var left, opacity, scale; //fieldset properties which we will animate
   var animating; //flag to prevent quick multi-click glitches

   $(".next").click(function(){
     if(animating) return false;
     animating = true;

     current_fs = $(this).parent();
     next_fs = $(this).parent().next();

     //activate next step on progressbar using the index of next_fs
     $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

     //show the next fieldset
     next_fs.show();
     //hide the current fieldset with style
     current_fs.animate({opacity: 0}, {
       step: function(now, mx) {
         //as the opacity of current_fs reduces to 0 - stored in "now"
         //1. scale current_fs down to 80%
         scale = 1 - (1 - now) * 0.2;
         //2. bring next_fs from the right(50%)
         left = (now * 50)+"%";
         //3. increase opacity of next_fs to 1 as it moves in
         opacity = 1 - now;
         current_fs.css({'transform': 'scale('+scale+')'});
         next_fs.css({'left': left, 'opacity': opacity});
       },
       duration: 800,
       complete: function(){
         current_fs.hide();
         animating = false;
       },
       //this comes from the custom easing plugin
       easing: 'easeInOutBack'
     });
   });
   </script>

I need to write something here in order to post this last part of the code. I have mostly code in my question...

Upvotes: 0

Views: 96

Answers (3)

Sathishkumar
Sathishkumar

Reputation: 3733

<script type="text/javascript">
    $('#reg_btn').on('click', function(event){
         $.ajax({
           type: "POST",
           url: 'checksubscriber.php',
           dataType: 'json',
           data: {
             email: $('# .email').val(),
           },
           success: function(response) {
             $('#block1').hide(); //Adds display:none
             $('#block2').show(); //Removes display:none
           },
           error: function (jqXHR, textStatus, errorThrown) {
             console.log(jqXHR, textStatus, errorThrown); 
           }
         });
         event.preventDefault();
         return false;
   });
</script>

Try to put console.log(response) inside success function. Reload the page and open the browser console before performing any operation. After that click the element.

Now you should be able to see the output of the PHP file response in browser console.

You can the access the message from response object by using response.message.

Dot(.) operator can be used to access the params inside JSON object. You can't access it like response['message']. Since you are sending JSON object from PHP file.

Replace your fieldsets with below code

<!-- fieldsets -->
<fieldset id="block1">
    <input type="text" name="email" placeholder="Email" />
    <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset id="block2" style="display:none">
    <input type="text" name="address" placeholder="Complete address" />
    <input type="button" name="previous" class="previous action-button" value="Back" />
    <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset id="block3" style="display:none">
     <input type="button" name="previous" class="previous action-button" value="Back" />
</fieldset>

Upvotes: 1

kscherrer
kscherrer

Reputation: 5766

read response values like 

success: function(response) {
    var msg = response.message;
    // do with msg whatever you want
},

And yes, your PHP code looks fine except the syntax error that Vinod pointed out. using http_response_code(400); to let ajax know it wasn't a success is very nice!

edit: replaced response['message'] with response.message

Upvotes: 1

Sachin
Sachin

Reputation: 397

whatever you return or echo data from your Checksubscriber.php, it will recorded as response. Alert data in response function just like i did in below code.

<script type="text/javascript">
                $('#reg_btn').on('click', function(){
                  $.ajax({
                          type: "POST",
                          url: 'checksubscriber.php',
                          dataType: 'json',
                          data: {
                            email: $('# .email').val(),
                          },
                          success: function(response) {
                            alert(response); 
                      },
                          error: function (jqXHR, textStatus, errorThrown) {

                      }

                        });

                        e.preventDefault();
                        return false;
                    });
        </script>

Upvotes: 1

Related Questions