Ajax select post with real-time message - php

Question

I'm trying to get real-time message and response from this POST, but doesn't work for me. I want to display in this Ajax text from timezone.php - error or success Where I made mistake?
HTML
<form id="timezone_form">
<select name="timezone_select">
<option value="1">test 1</option>
<option value="2">test 2</option>
</select>
<input type="submit" value="Submit"/>
</form>
<div id="settings_ajax_message"></div>
JS
$(document).ready(function() {
$("#timezone_form").submit(function() {
$.ajax({
type: "POST",
url: "timezone.php",
data: $(this).serialize()
})
.done(function(data) {
$("#settings_ajax_message").html(data);
})
.fail(function() {
$("#settings_ajax_message").html(data);
});
return false;
});
});
timezone.php
<?php
$timezone = $_POST['timezone_select'];
if ($timezone == 1) {
echo '<div class="ch-mes-fixed-warning-animation"><div class="ch-mes-warning">error</div></div>';
} else {
echo '<div class="ch-mes-fixed-success"><div class="ch-mes-success">success</div></div>';
}
?>

Answer 1

First thing, you have to understand why your fail function would be called:
$(document).ready(function(e) {
// Prevent the form from actually submitting to the server
e.preventDefault();
$("#timezone_form").submit(function() {
$.ajax({
type: "POST",
url: "timezone.php",
data: $(this).serialize()
})
// Status code 200-299 was returned. The data was successfully returned from the server.
// PHP by default will always return 200 (Which signifys that the server processed the data, and is returning it)
.done(function(data) {
$("#settings_ajax_message").html(data);
})
// Status 300+ was returned from the server. This usually indicates an error on the server (ie. 404 not found, or 500 server error)
.fail(function() {
$("#settings_ajax_message").html(data);
});
return false;
});
});
You have 2 ways to handle this. 1, have your server actually return an error (Usually the preferred route for an API):
header("HTTP/1.0 422 Error");
In most cases, you should catch bad errors with .fail like if your server craps out. Have your server return 200 (Which will process the done function), but check for an error property:
<?php
// Tell javascript this is a json response:
header("Content-type: application/json");
$timezone = $_POST['timezone'];
if ($timezone == 1) {
echo json_encode(['error' => true, 'message' => '<div class="ch-mes-fixed-warning-animation"><div class="ch-mes-warning">error</div></div>']);
} else {
echo json_encode(['error' => false, 'message' => '<div class="ch-mes-fixed-success"><div class="ch-mes-success">success</div></div>');
}
?>
And your ajax:
$(document).ready(function() {
$("#timezone_form").submit(function() {
$.ajax({
type: "POST",
url: "timezone.php",
dataType: 'json', //IMPORTANT! PROCESS AS JSON
data: $(this).serialize()
})
.done(function(data) {
if (data.error) {
console.log(data);
//Do something with the error
$("#settings_ajax_message").html(data.message);
} else {
//No error. data.message will be the message
}
})
.fail(function() {
$("#settings_ajax_message").html(data);
});
return false;
});

Answer 2

At first, your field name is timezone_select, look here: <select name="timezone_select">. In PHP you checking another name: $timezone = $_POST['timezone'];