How I change query onclick combobox event in php? - php

Question

I am new with php.I want to change query when some event occur on ComboBox. So that according to that query I retrieve data from database in php.The code is given below:-
<form method="POST" action="">
<select id="choose-color">
<option value="all">All</option>
<option value="blue">Blue</option>
<option value="black">Black</option>
<option value="white">White</option>
</select>
</form>
<?php
$conn = mysqli_connect("localhost","root","123");
mysqli_select_db($conn,"DwtCW");
$q = "Select * from Clothes";
$result = mysqli_query($conn, $q);
if (!$result) {
echo 'Some error';
}
while($row = mysqli_fetch_assoc($result)){
if($row{'Image_url'} != ''){
echo '<div>'
. '<img src='.$row{'Image_url'}.'/>'
.'</div>'
}
?>
When I select blue option of ComboBox my $q(query given in above code) is change to
$q = "Select * from Clothes where colour = 'blue'";
So there should appear only images of clothes having blue colour onpage.
How I reach it?

Answer 1

you need to send ajax request to PHP page. onChange event will trigger ajax request and will change query.
<form method="POST" action="">
<select id="choose-color">
<option value="all">All</option>
<option value="blue">Blue</option>
<option value="black">Black</option>
<option value="white">White</option>
</select>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$('#choose-color').on('change', function(){
var color = $(this).val();
if(color){
$.ajax({
type: "GET",
url: "index.php", //or your php page
data: { color: color }
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
});
}
});
});
</script>
<?php
$conn = mysqli_connect("localhost","root","123");
mysqli_select_db($conn,"DwtCW");
$whr = ' ';
// check if color is posted on change event
if ( isset($_GET['color'] ) ) {
$whr .= " where colour = '".$color."' ";
}
$q = "Select * from Clothes $whr";
$result = mysqli_query($conn, $q);
if (!$result) {
echo 'Some error';
}
while($row = mysqli_fetch_assoc($result)){
if($row{'Image_url'} == ''){
echo '<div>'
. '<img src='.$row{'Image_url'}.'/>'
.'</div>'
}
?>