Recently i have asked same question but this is improved one. i have some select options on my webpage and as someone selects option i want to get data from database for the same. i tried to do but i am geting data for only one select . what if i want to get data with combination of 3 select fields . how can i achieve this. please help !!!
here is my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Filter</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" >
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
</head>
<body>
<div id="rooms"></div>
<div class="container main-section" id="main">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="location">Location:</label>
<select name="location" id="location" class="form-control">
<option value="">Select</option>
<option value="candolim">Candolim</option>
<option value="calangute">Calangute</option>
<option value="baga">Baga</option>
<option value="anjuna">Anjuna</option>
<option value="morjim">Morjim</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="stay_type">Property Type:</label>
<select name="stay_type" id="stay_type" class="form-control">
<option value="">Select</option>
<option value="hotel">Hotel</option>
<option value="villa">Villa</option>
<option value="studio">Studio</option>
<option value="resort">Resort</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="room_type">Room Type:</label>
<select name="room_type" id="room_type" class="form-control">
<option value="">Select</option>
<option value="standard">Standard</option>
<option value="deluxe">Deluxe</option>
<option value="suit">Suit</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group"><br>
<input type="submit" name="submit" value="Search" class="btn btn-success">
</div>
</div>
</div>
</div>
<div class="display">
</div>
<script src="js/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="js/script.js" type="text/javascript"></script>
</body>
</html>
and this is my script --
$(document).ready(function(){
getAllRooms();
function getAllRooms(){
$.ajax({
url:'action.php',
method: 'POST',
data:{rooms:1},
success:function(response){
$('.display').html(response);
}
});
}
$('#location').change(function(){
var location = $(this).val();
$.ajax({
url:'action.php',
method: 'POST',
data:{location:location},
success:function(response){
$('.display').html(response);
}
});
});
});
and finally here is my action.php
<?php
$conn=mysqli_connect('localhost','cms_user','12345','rooms');
if (isset($_POST['rooms']) || isset($_POST['location'])){
if (isset($_POST['rooms'])){
$query_all = "SELECT * FROM rooms ORDER BY rand() ";
}
if(isset($_POST['location'])){
$location = $_POST['location'];
$query_all = "SELECT * FROM rooms WHERE location = '$location' 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>";
}
}
?>
Thanks !
