Not Getting ajax success response using mamp - php

Question

For some reason I am not getting a response back from AJAX call. I have used the console in Chrome and Firefox to monitor this but all I can see if what the form is sending. I am using MAMP and haven't tried this on a live server, but I need it to work in MAMP. I have tried lots of things people have suggested from similar issues I have found in stackoverflow but known have worked,please help!
<form id="signup_submit" method="post" action="AJAX/signup.php">
<div class="form-group show-progress">
</div>
<div class="form-group">
<input type="text" name="firstname" id="firstname" class="form-control" autocomplete="firstname" placeholder="Enter First Name...">
<span class="firstname-error error"></span>
</div><!-- form-group -->
<div class="form-group">
<input type="text" name="surname" autocomplete="surname" id="surname" class="form-control" placeholder="Enter Surname...">
<span class="surname-error error"></span>
</div><!-- form-group -->
<div class="form-group">
<input type="email" name="email" id="email" autocomplete="email" class="form-control" placeholder="Enter Email...">
<span class="email-error error"></span>
</div><!-- form-group -->
<div class="form-group">
<input type="password" name="password" autocomplete="password" id="password" class="form-control" placeholder="Choose Password...">
<span class="password-error error"></span>
</div><!-- form-group -->
<div class="form-group">
<input type="password" id="confirm" name="confirm" autocomplete="confirm" class="form-control" placeholder="Confirm Password...">
<span class="confirm-error error"></span>
</div><!-- form-group -->
<div class="form-group">
<button type="submit" id="submit" >Create Account</button>
</div><!-- form-group -->
<div class="form-group">
Already have an account?
</div>
</form><!-- form -->
signup.js
$(document).ready(function(){
$('form').submit(function(e){
e.preventDefault();
var data = $('#signup_submit').serialize();
console.log(data)
$.ajax({
type:'POST',
URL: 'AJAX/signup.php',
data: data,
dataType: 'json',
encode:true,
success: function(d){
d = JSON.parse(d);
console.log(d.testjson);
if(d.success){
$('#signup_submit').append('<div>'+d.message+'</div>');
}else{
if(d.errors.firstname){$('.firstname-error').show();$('.firstname-error').html(d.errors.firstname);}
if(d.errors.surname){$('.surname-error').show();$('.surname-error').html(d.errors.surname);}
if(d.errors.email){$('.email-error').show();$('.email-error').html(d.errors.emailname);}
if(d.errors.password){$('.password-error').show();$('.password-error').html(d.errors.password);}
if(d.errors.confirm){$('.confirm-error').show();$('.confirm-error').html(d.errors.confirm);}
}
}
})
})
})
signup.php
<?php
$errors = array();
$response = array();
if(empty($_POST['firstname'])){$errors['firstname'] = 'First Name Is Required!';}
if(empty($_POST['surname'])){$errors['surname'] = 'Surname Is Required!';}
if(empty($_POST['email'])){$errors['email'] = 'Email Address Is Required!';}
if(empty($_POST['password'])){$errors['password'] = 'Password Is Required!';}
if(empty($_POST['confirm'])){$errors['confirm'] = 'Please Confirm Your Password!';}
$response['errors'] = $errors;
if (!empty($errors)){
$response['success'] = false;
$response['message'] = 'FAIL!';
}else{
$response['success'] = true;
$response['message'] = 'SUCCESS!';
}
?>

Answer 1

You are never returning anything in the signup.php file. You need to json_encode and use echo or exit at the end of your script.
<?php
$errors = array();
$response = array();
if (empty($_POST['firstname'])) $errors['firstname'] = 'First Name Is Required!';
if (empty($_POST['surname'])) $errors['surname'] = 'Surname Is Required!';
if (empty($_POST['email'])) $errors['email'] = 'Email Address Is Required!';
if (empty($_POST['password'])) $errors['password'] = 'Password Is Required!';
if (empty($_POST['confirm'])) $errors['confirm'] = 'Please Confirm Your Password!';
$response['errors'] = $errors;
if (!empty($errors)) {
$response['success'] = false;
$response['message'] = 'FAIL!';
} else {
$response['success'] = true;
$response['message'] = 'SUCCESS!';
}
// Return data here
exit(json_encode($response));
?>
Edit: Keep the PHP exit from above, but instead use jQuery.post() rather than jQuery.ajax() as it is shorter, cleaner and simpler than messing with content types. It should also fix your issue:
$(document).ready(function(){
$('form').submit(function(e) {
e.preventDefault();
var data = $('#signup_submit').serialize();
console.log("data:");
console.log(data);
$.post("AJAX/signup.php", data, result => {
console.log("result:");
console.log(result);
result = JSON.parse(result);
if (result.success) {
$('#signup_submit').append('<div>'+result.message+'</div>');
} else {
if (result.errors.firstname) $('.firstname-error').html(result.errors.firstname).show();
if (result.errors.surname) $('.surname-error').html(result.errors.surname).show();
if (result.errors.email) $('.email-error').html(result.errors.email).show();
if (result.errors.password) $('.password-error').html(result.errors.password).show();
if (result.errors.confirm) $('.confirm-error').html(result.errors.confirm).show();
}
});
});
});

Answer 2

Remove dataType: 'json' and try. Also set the header before echoing back the result like below:
header('Content-type:application/json');
echo json_encode($response);