Accessing JSON values in JQUERY/AJAX based on condition - php

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>
Continue
</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

You need to modify your php response first.
$response = [];
if (strlen($password) >= 8 && strlen($password) <= 60) {
if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
$account->addUser($username, $password, $email);
if ($account->userExist()) {
$response['type'] ="error";
$response['msg'] = "Email Address Is Already Registered!";
} else {
$account->create();
$response['type'] = "success";
$response['msg']="You are signed in successfully";
}
} else {
$response['type'] ="error";
$response['msg'] = 'Invalid email!, Please enter a valid Email';
}
echo json_encode($response);
}
//output
{"type":"success","msg":"You are signed in successfully"}
//ajax
$.ajax({
type: 'POST',
url: 'register.php',
dataType: 'json',
data: formData,
success: function (data) {
$("#json").html(data["msg"]);
//get the response type simply as data['type'] this will give you success or error
console.log(data);
},
error:function(error){
console.log(error);
}
});

Answer 2

$.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);
}
});