i have some Checkboxes on my webpage and as someone checks it i want to get data from database for the combination of checkboxes . i tried to code but i am not geting any data. i am writing some crazy code ( i think) . i want if someone checks checkboxes data should be display for the same. please please help !
here is my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Filter</title>
<link rel="stylesheet" href="bootstrap-4.0.0-beta/dist/css/bootstrap.min.css" >
<link rel="stylesheet" href="css/style.css">
<link href="http://ift.tt/1jAvFUy" rel="stylesheet">
</head>
<body>
<div id="rooms"></div>
<div class="container main-section" id="main">
<div class="row">
<div class="col-md-4">
<h4>Filter by Location </h4>
<input type="checkbox" id="calangute" value="calangute">
<label for="calangute"> Calangute</label><br>
<input type="checkbox" id="baga" value="baga">
<label for="baga"> Baga</label><br>
<input type="checkbox" id="morjim" value="morjim">
<label for="morjim"> Morjim</label><br>
<input type="checkbox" id="candolim" value="candolim">
<label for="candolim"> Candolim</label><br>
<input type="checkbox" id="anjuna" value="anjuna">
<label for="anjuna"> Anjuna</label>
</div>
<div class="col-md-4">
<h4>Filter by Location </h4>
<input type="checkbox" id="hotel" value="hotel">
<label for="hotel"> Hotel</label><br>
<input type="checkbox" id="villa" value="villa">
<label for="villa"> Villa</label><br>
<input type="checkbox" id="studio" value="studio">
<label for="studio"> Studio</label><br>
<input type="checkbox" id="resort" value="resort">
<label for="resort"> Resort</label>
</div>
<div class="col-md-4">
<h4>Filter by Location </h4>
<input type="checkbox" id="standard" value="standard">
<label for="standard"> Standard</label><br>
<input type="checkbox" id="deluxe" value="deluxe">
<label for="deluxe"> Deluxe</label><br>
<input type="checkbox" id="suit" value="suit">
<label for="suit"> Suit</label><br>
</div>
</div>
</div>
<div class="display">
<!--
<div class="row" >
<div class="col-md-4">
<img src="img/room1.jpg" alt="room">
</div>
<div class="col-md-6">
<h2>The Taj Aguada</h2>
<p>Villa</p>
<h4 class="text-success">Candolim</h4>
</div>
<div class="col-md-2">
<br><br><br><br>
<h4 class="text-primary">Room Type Deluxe</h4>
<h4>Rs : 4000 </h4>
<a href="#"><input type="submit" name="book" value="Book Now" class="btn btn-success"></a>
</div>
</div>
-->
</div>
<script src="js/jquery.js"></script>
<script src="bootstrap-4.0.0-beta/dist/js/bootstrap.min.js"></script>
<script src="js/script.js" type="text/javascript"></script>
</body>
</html>
Here is my script
$(document).ready(function(){
getAllRooms();
function getAllRooms(){
$.ajax({
url:'action.php',
method: 'POST',
data:{rooms:1},
success:function(response){
$('.display').html(response);
}
});
}
function getRooms(){
var calangute = $('#calangute').val();
var baga = $('#baga').val();
var morjim = $('#morjim').val();
var candolim = $('#candolim').val();
var anjuna = $('#anjuna').val();
var hotel = $('#hotel').val();
var villa = $('#villa').val();
var studio = $('#studio').val();
var resort = $('#resort').val();
var standard = $('#standard').val();
var deluxe = $('#deluxe').val();
var suit = $('#suit').val();
$.ajax({
url: 'action.php',
method: 'POST',
data: {
calangute : calangute,
baga : baga,
morjim : morjim,
candolim : candolim,
anjuna : anjuna,
hotel : hotel,
villa : villa,
studio : studio,
resort : resort,
standard : standard,
deluxe : deluxe,
suit : suit,
},
success:function(response){
$('.display').html(response);
}
});
}
$('#calangute').change(function(){
getRooms();
});
$('#baga').change(function(){
getRooms();
});
$('#morjim').change(function(){
getRooms();
});
$('#candolim').change(function(){
getRooms();
});
$('#anjuna').change(function(){
getRooms();
});
$('#hotel').change(function(){
getRooms();
});
$('#villa').change(function(){
getRooms();
});
$('#resort').change(function(){
getRooms();
});
$('#standard').change(function(){
getRooms();
});
$('#deluxe').change(function(){
getRooms();
});
$('#suit').change(function(){
getRooms();
});
$('#studio').change(function(){
getRooms();
});
//
});
and here is my action page
<?php
$conn=mysqli_connect('localhost','cms_user','12345','rooms');
if (isset($_POST['rooms'])){
if (isset($_POST['rooms'])){
$query_all = "SELECT * FROM rooms ORDER BY rand() ";
}
$query_run = mysqli_query($conn,$query_all);
if (mysqli_num_rows($query_run)>0){
while ($row = mysqli_fetch_array($query_run)){
$room_id = $row['id'];
$room_name = $row['name'];
$location = $row['location'];
$stay_type = $row['stay_type'];
$room_type = ucfirst($row['room_type']);
$image = $row['image'];
$price = $row['price'];
echo "
<div class='container rooms'>
<div class='row'>
<div class='col-md-4'>
<img src='img/$image' alt='room' width='100%'>
</div>
<div class='col-md-6'>
<h2>$room_name</h2>
<p>$stay_type</p>
<h4 class='text-success'>$location</h4>
</div>
<div class='col-md-2'>
<br><br><br><br>
<h4 class='text-primary'>$room_type</h4>
<h4>Rs : $price </h4>
<a href='#'><input type='submit' name='book' value='Book Now' class='btn btn-success'></a>
</div>
</div></div>
";
}
} else {
echo "<center><h3>No Properties available</h3></center>";
}
}
# setting parameters from the post
$calangute = isset($_POST['calangute']) ? $_POST['calangute'] : '';
$baga = isset($_POST['baga']) ? $_POST['baga'] : '';
$morjim = isset($_POST['morjim']) ? $_POST['morjim'] : '';
$candolim = isset($_POST['candolim']) ? $_POST['candolim'] : '';
$anjuna = isset($_POST['anjuna']) ? $_POST['anjuna'] : '';
$hotel = isset($_POST['hotel']) ? $_POST['hotel'] : '';
$villa = isset($_POST['villa']) ? $_POST['villa'] : '';
$studio = isset($_POST['studio']) ? $_POST['studio'] : '';
$resort = isset($_POST['resort']) ? $_POST['resort'] : '';
$standard = isset($_POST['standard']) ? $_POST['standard'] : '';
$deluxe = isset($_POST['deluxe']) ? $_POST['deluxe'] : '';
$suit = isset($_POST['suit']) ? $_POST['suit'] : '';
# defaults
$select = "SELECT * FROM rooms";
$where = " WHERE 1 = 1"; # to have a default where that is always true
$order_by = " ORDER BY rand()"; # you can always change the order by this way
if ($calangute != '') {
$where .= " AND location = 'calangute'";
}
if ($baga != '') {
$where .= " AND location = '$baga'";
}
if ($morjim != '') {
$where .= " AND location = '$morjim'";
}
if ($candolim != '') {
$where .= " AND location = '$candolim'";
}
if ($anjuna != '') {
$where .= " AND location = '$anjuna'";
}
if ($hotel != '') {
$where .= " AND stay_type = '$hotel'";
}
if ($studio != '') {
$where .= " AND stay_type = '$studio'";
}
if ($resort != '') {
$where .= " AND stay_type = '$resort'";
}
if ($standard != '') {
$where .= " AND room_type = '$standard'";
}
if ($deluxe != '') {
$where .= " AND room_type = '$deluxe'";
}
if ($suit != '') {
$where .= " AND room_type = '$suit'";
}
if ($villa != '') {
$where .= " AND stay_type = '$villa'";
}
$sql = $select . $where . $order_by;
$query_run = mysqli_query($conn,$sql);
if (mysqli_num_rows($query_run)>0){
while ($row = mysqli_fetch_array($query_run)){
$room_id = $row['id'];
$room_name = $row['name'];
$location = $row['location'];
$stay_type = $row['stay_type'];
$room_type = ucfirst($row['room_type']);
$image = $row['image'];
$price = $row['price'];
echo "
<div class='container rooms'>
<div class='row'>
<div class='col-md-4'>
<img src='img/$image' alt='room' width='100%'>
</div>
<div class='col-md-6'>
<h2>$room_name</h2>
<p>$stay_type</p>
<h4 class='text-success'>$location</h4>
</div>
<div class='col-md-2'>
<br><br><br><br>
<h4 class='text-primary'>$room_type</h4>
<h4>Rs : $price </h4>
<a href='#'><input type='submit' name='book' value='Book Now' class='btn btn-success'></a>
</div>
</div></div>
";
}
}else {
echo "<center><h3>No Properties available for your search </h3></center>";
}
?>
Thanks :)
Aucun commentaire:
Enregistrer un commentaire