Post option value to mysql via ajax wont work - php

Question

i have been working on some project and getting some experience on php and ajax, jquery. So i have checked 20+ question on stackoverflow but couldnt find the solution even if its already answered the same question.
I have tryed 10 diffrent solution but i guess im skipping something.
I have simple select box and im using ajax to send mysql but only select box doesnt work for some reason.
HTML Code:
<section class="resume-section p-3 p-lg-5 d-flex flex-column" id="rezervasyon">
<div class="my-auto">
<h2 class="mb-5">Online Rezervasyon</h2>
<form id="loginForm" method="" action="" novalidate="novalidate">
<div class="form-group row">
<label for="rez_ad" class="col-sm-2 col-form-label">İsim Soyisim</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="rez_ad" id="rez_ad" placeholder="İsim Soyisim">
</div>
</div>
<div class="form-group row">
<label for="rez_saat" class="col-sm-2 col-form-label">Rezervasyon Saati</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="rez_saat" id="rez_saat" placeholder="Rezervasyon saati">
</div>
</div>
<div class="form-group row">
<label for="rez_gsm" class="col-sm-2 col-form-label">Cep Numaranız</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="rez_gsm" id="rez_gsm" placeholder="İletişim numaranız.">
</div>
</div>
<div class="form-group row">
<label for="rez_tarih" class="col-sm-2 col-form-label">Tarih</label>
<div class="col-sm-10">
<input type="date" class="form-control" name="rez_tarih" id="rez_tarih" placeholder="Tarih belirtiniz.">
</div>
</div>
<div class="form-group row">
<label for="rez_email" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" name="rez_email" id="rez_email" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="rez_tip" class="col-sm-2 col-form-label" name="rez_tip" id="rez_tip">Rezervasyon Tipi</label>
<div class="col-sm-10">
<select id="rez_tip" class="custom-select">
<option value="" selected>Rezervasyon Tipi Seçiniz</option>
<option value="1">Cuma Fix Menü</option>
<option value="2">Cumartesi Fix Menü</option>
<option value="3">Haftaiçi ALKOLSÜZ</option>
<option value="4">Haftaiçi ALKOLLÜ</option>
<option value="5">Kutlama / Doğum Günü</option>
<option value="6">Diğer</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="rez_sayi" class="col-sm-2 col-form-label" id="rez_sayi" name="rez_sayi">Kişi Sayısı</label>
<div class="col-sm-10">
<select id="rez_sayi" class="custom-select">
<option value="" selected>Kişi Sayısı Belirtiniz</option>
<option value="1">2 Kişilik Rezervasyon</option>
<option value="2">4 Kişilik Rezervasyon</option>
<option value="3">4+ Kişilik Rezervasyon</option>
<option value="4">6+ Kişilik Rezervasyon</option>
<option value="5">8+ Kişilik Rezervasyon</option>
<option value="6">20+ Kişilik Rezervasyon</option>
</select>
</div>
</div>
<textarea name="rez_aciklama" id="rez_aciklama" class="form-control" rows="6" cols="21" required="required"
placeholder="Ek açıklama girebilirsiniz."></textarea>
<form class="was-validated">
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-center" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="divider"></div>
<div class="right-side">
<button type="button" class="btn btn-danger btn-link">Delete</button>
</div>
</div>
</div>
</div>
</div>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
<label class="custom-control-label" for="customControlValidation1">Rezervasyon Şartlarını Kabul Ediyorum!</label>
<div class="invalid-feedback">Rezervasyon şartlarını okuyunuz!</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="button" class="btn btn-success" name="insert-data" id="insert-data" onclick="insertData()">Rezervasyonu Tamamla</button>
</div>
</div>
<br>
<p id="message"></p>
</form>
Here is my php file ;
<?php
include('db.php');
$rez_ad=$_POST['rez_ad'];
$rez_saat=$_POST['rez_saat'];
$rez_gsm=$_POST['rez_gsm'];
$rez_tarih=$_POST['rez_tarih'];
$rez_tip=$_POST['rez_tip'];
$rez_sayi=$_POST['rez_sayi'];
$rez_aciklama=$_POST['rez_aciklama'];
$stmt = $DBcon->prepare("INSERT INTO student(rez_ad,rez_saat,rez_gsm,rez_tarih,rez_tip,rez_sayi,rez_aciklama) VALUES(:rez_ad, :rez_saat,:rez_gsm,:rez_tarih,:rez_tip,:rez_sayi,:rez_aciklama)");
$stmt->bindparam(':rez_ad', $rez_ad);
$stmt->bindparam(':rez_saat', $rez_saat);
$stmt->bindparam(':rez_gsm', $rez_gsm);
$stmt->bindparam(':rez_tarih', $rez_tarih);
$stmt->bindparam(':rez_tip', $rez_tip);
$stmt->bindparam(':rez_sayi', $rez_sayi);
$stmt->bindparam(':rez_aciklama', $rez_aciklama);
if($stmt->execute())
{
$res="Data Inserted Successfully:";
echo json_encode($res);
}
else {
$error="Not Inserted,Some Probelm occur.";
echo json_encode($error);
}
?>
Here is my jquery code;
function insertData() {
var rez_ad=$("#rez_ad").val();
var rez_saat=$("#rez_saat").val();
var rez_gsm=$("#rez_gsm").val();
var rez_tarih=$("#rez_tarih").val();
var rez_tip=$("#rez_tip").val();
var rez_sayi=$("#rez_sayi").val();
var rez_aciklama=$("#rez_aciklama").val();
// AJAX code to send data to php file.
$.ajax({
type: "POST",
url: "rez/insert-data.php",
data: {rez_ad:rez_ad,rez_saat:rez_saat,rez_gsm:rez_gsm,rez_tarih:rez_tarih,rez_tip:rez_tip,rez_sayi:rez_sayi,rez_aciklama:rez_aciklama},
dataType: "JSON",
success: function(data) {
$("#message").html(data);
$("p").addClass("alert alert-success");
},
error: function(err) {
alert(err);
}
});
}
Thanks for help !

Answer 1

You should then pass the rez_tip option in ajax call also.
<script type="text/javascript">
function insertData() {
//var rez_tip=$("#rez_tip option:selected").text();
//var rez_sayi=$("#rez_sayi option:selected").text();
var rez_tip=$("select#rez_tip").val();
var rez_sayi=$("select#rez_sayi").val();
// AJAX code to send data to php file.
$.ajax({
type: "POST",
url: "rez/insert-data.php",
data: {rez_sayi:rez_sayi,rez_tip:rez_tip},
dataType: "JSON",
success: function(data) {
$("#message").html(data);
$("p").addClass("alert alert-success");
},
error: function(err) {
alert(err);
}
});
}
</script>