根据条件访问JQUERY / AJAX中的JSON值

Question

Please be patient because I know this question might have been answered but I have not been able to find it. I have been working on a project & lately I just started using AJAX.

My JSON is coming from PHP, which includes errors and success, now the issue is how do I access success(if the registrattion is successful to display as Text(not alert)) and display errors when registration fails.

What conditions should be used?

<div class="remodal" data-remodal-id="RegisterModal">
  <div class="popup-1">
      <div class="popup-content" id="register_container">
          <div id="register_title" class="popup-title text-purple">Sign Up</div>
          <div class="reg-notification">
              <p>You Successfully registered to our website and now you can login and use our services</p>
              <a href="feed.php" class="popup-link">Continue</a>
          </div>
          <div id="json"></div>
          <form id="register-form" action="register.php" method="POST">
              <div class="form-grp">
                  <!--<label>Username</label>-->
                  <input type="text" id="username" name="username" placeholder="Username">
              </div>
              <div class="form-grp">
                  <input type="email" name="register_email" id="register_email" placeholder="Email">
              </div>
              <div class="form-grp">
                  <input type="password" id="register_password" name="register_password"  placeholder="Password">
              </div>
              <div class="form-grp">
                  <input type="password" id="confirm_password" name="confirm_password"  placeholder="Retype Password">
              </div>
              <div class="btn-grp">
                  <button type="submit" name="submit" class="button-purple" id="do_register">Sign Up</button>
                  <button class="button-white" style="margin-left: 30px;" data-remodal-target="LoginModal">Login to access</button>
              </div>
          </form>
      </div>

This is my PHP below

  if (strlen($password) >= 8 && strlen($password) <= 60) {


                    if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
                        $account->addUser($username, $password, $email);
                        if ($account->userExist()) {
                            $message['email'] = "Email Address Is Already Registered!";
                        } else {
                            $account->create();
                            $message['type'] = "success";
                         }
                    } else {
                        $message = 'Invalid email!, Please enter a valid Email';
                    }

header('Content-Type: application/json');
$response = ['message' => $message];
echo json_encode($response);
 // echo json_encode($message);
//echo $message;

and this is my AJAX

$.ajax({
            type: 'POST',
            url: 'register.php',
            dataType: 'json',
            data: formData,
            success: function (data) {
                $("#json").html(data["message"]);
                //response = response.slice(0, -1);
                //response = JSON.parse(response);
                //var json = JSON.parse(response);
                //var resdata = response;
                //var json = $.parseJSON(response);
                //if (resdata) {

                    //alert(resdata['success']);
                    //alert(json['success']);
                    // $("#register-form").addClass("remove-form");
                    // $("#register_container").addClass("register-container-active");
                    // $("#register_title").html("Register was Successful");
                    // $(".reg-notification").addClass("show-reg-notification");
                //}else if (resdata['email']) {
                    //alert(resdata['email']);
                //}
                    //alert(json['email']);
                    //$("#msg").html(json.email);
                //}
                console.log(response);
            },
            error:function(error){
                console.log(error);
            }
        });

As you can see all the codes I commented are failed codes, I like to display the message coming from PHP in my #json ID.

What I like to do is get the 'success' encoded from PHP to my HTML through AJAX, if user registration is successful, also get the 'email' error out if user exists.

I have no idea what condition to use in AJAX to test this or how to go about it and I know it will be something simple.

But I may be to clustered in the head to figure it ..as I keep looking at :(

Answer 1

   $.ajax({
                type: 'POST',
                url: 'register.php',
                dataType: 'json',
                data: formData,
                success: function (data) {
                    console.log(data.message.email);//that will print email already registered 


                var result=data.message.email;
                if(result=="success"){
                   $("#json").empty();//incase it has previous data
                   $("#json").append(result);//that will append data in your div

}
else{

    $("#json").empty();//incase it has previous data
                   $("#json").append(result);//that will append data in your div
}

                },
                error:function(error){
                    console.log(error);
                }
            });