I know this question has been asked a lot before but i've tried all the solutions and nothing worked for me so my problem is that i can not load json response from the server using ajax i have my script.js in a js folder and my sendMail.php in includes folder and the index.php is in root folder also when i submit some infos the status is 200 means all ok but also i can not check them with my php code because of json response
index.php
<!DOCTYPE html>
<html>
<head>
<title>Booking</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<form action="includes/sendMail.php" method="POST" name="reservation-form" id="reservation-form">
<div>
<select class="select-dropbox" name="mail-hour">
<option value="" disabled selected>Hour</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div>
<input type="text" name="mail-phone" placeholder="Phone Number"
>
</div>
<div>
<input type="text" name="mail-email" placeholder="Email Address" >
</div>
<div>
<textarea name="mail-msg" placeholder="Your Message" ></textarea>
</div>
<div id="check-form">
</div>
<div>
<button id="mail-submit" name="mail-submit" type="submit">BOOK A TABLE</button>
</div>
</form>
</body>
</html>
script.js
$(document).ready(function(){
$('#mail-submit').click(function(event){
event.preventDefault();
$.ajax({
contentType: "application/json; charset=utf-8",
dataType: 'JSON',
url: 'includes/sendMail.php',
type: 'POST',
data: $('#reservation-form').serialize(),
beforeSend: function(xhr){
$('#mail-submit').html('SENDING...');
},
success: function(response){
if(respo,se){
alert(response);
if(response['signal'] == 'ok'){
$('#check-form').html('<div>'+ response['res-msg'] +'</div>');
}
else{
$('#check-form').html('<div>'+ response['res-msg'] +'</div>');
}
}
},
error: function(xhr, status, thrown){
alert("xhr: "+xhr+" status: "+status+" thrown: "+thrown);
$('#check-form').html('<div>An Error occurs. Please try again.</div>');
},
complete: function(){
$('#mail-submit').html('BOOK A TABLE');
}
});
});
});
sendMail.php
<?php
if (isset($_POST['mail-submit'])) {
$hour = trim($_POST['mail-hour']);
$phone = trim($_POST['mail-phone']);
$email = trim($_POST['mail-email']);
$message = trim($_POST['mail-msg']);
if($hour != null && $phone != null && $email != null){
if(!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$signal = 'bad';
$msg = 'Invalid email. Please check';
}
else {
$signal = 'ok';
$msg = 'Form submitted';
}
}
else{
$signal = 'bad';
$msg = 'Please fill in all the fields.';
}
$data = array(
'signal' => $signal,
'res-msg' => $msg
);
echo json_encode($data);
}
?>
