我有这段代码,它的作用是知道我在表单中输入的那一天有多少人被预订。查询运行得很好,并返回预期的结果。问题是我想在选择的一个小时旁边显示这个结果。所以它不会显示出来。如果id result-date的div或者从不同的时间选项中选择出来,我会看到结果。如何在选项中查看查询结果?
这是check_availablity. php的文件。
require('config.php');
sleep(1);
$data = $_POST['data'];
$result = $connexion->query(
'SELECT persones FROM reservas where data = \''.$data.'\' ORDER by hora ASC'
);
if ($result->num_rows > 0) {
foreach ($result as $hores){
echo $hores['persones'].' llocs disponibles.';
}
}
else{
echo 'Esta tot reservat';
}
<!DOCTYPE HTML>
<html>
<head>
<title>Rem la Ràpita</title>
<link rel="icon" type="image/png" href="../images/favicon.png" sizes="32x32"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--Comprovar la disponibilitat d'horari-->
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#data').on('blur', function(){
var data = $(this).val();
var dataString = 'data='+data;
$.ajax({
type: "POST",
url: "check_availablity.php",
data: dataString,
success: function(data) {
$('#result-data').fadeIn(1000).html(data);
}
});
});
});
</script>
</head>
<body>
<div class="container-login">
<div class="wrap-login" style="width: 1000px">
<!--<form class="login-form validate-form" action="bd/reservar.php" method="post">-->
<form class="login-form validate-form" action="bd/reservar.php" method="post">
<span class="login-form-title"></span>
<div class="row">
<div class="wrap-input100 col-xs-6 espai-davant-text" data-validate = "Nom incorrecte">
<input class="input100" type="text" id="nom" name="nom" placeholder="">
<span class="focus-efecto"></span>
</div>
<div class="wrap-input100 col-xs-6 espai-davant-text" data-validate = "Email incorrecto">
<input class="input100" type="text" id="apellidos" name="apellidos" placeholder="" >
<span class="focus-efecto"></span>
</div>
<div class="wrap-input100" style="width:100%" data-validate = "Email incorrecto">
<input class="input100" type="text" id="email" name="email" placeholder="">
<span class="focus-efecto"></span>
</div>
<div class="wrap-input100 col-xs-6 espai-davant-text" data-validate="Telefon incorrecto">
<input class="input100" type="text" id="telefon" name="telefon" placeholder="">
<span class="focus-efecto"></span>
</div>
<div class="wrap-input100 col-xs-6 espai-davant-text" data-validate="Persones incorrecto">
<input class="input100" type="number" id="persones" name="persones" placeholder="">
<span class="focus-efecto"></span>
</div>
<div class="wrap-input100" style="width:100%" data-validate="Data incorrecto">
<input class="input100" type="date" id="data" name="data" placeholder="Fecha">
<span class="focus-efecto"></span>
</div>
<div class="wrap-input100" style="width:100%" data-validate="Hora incorrecto">
<select name="hora" id="hora" class="input100">
<option disabled selected></option>
<option value="12:00">12:00</option><div id="result-data"></div>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
<option value="22:30">22:30</option>
</select>
<span class="focus-efecto"></span>
</div>
<div class="container-login-form-btn">
<div class="wrap-login-form-btn">
<div class="login-form-bgbtn"></div>
<button type="submit" name="submit" class="login-form-btn">RESERVAR</button>
</div>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
1条答案
按热度按时间nvbavucw1#
看起来你试图用ajax来改变选择的选项?这是行不通的。而且选项上的div标签也是行不通的。
select通常由操作系统设置样式,并且不容易更改其中的内容。使用ajax在选项旁边显示内容是没有意义的。
如果您的目标是在用户打开下拉列表之前更新它,那么使用ajax替换完整的select元素,包括选项。