How to execute a query with multiple select option choices using AJAX? - php

Question

I would like my PHP query to update dynamically the data displayed without a refresh.
I have these two select option choices.
<select name="d">
<option <?php if ( $d == '50' ) { echo 'value="50" selected="selected" >50 km '; } else { echo 'value="50" >50 km '; } ?></option>
<option <?php if ( $d == '100' ) { echo 'value="100" selected="selected" >100 km '; } else { echo 'value="100" >100 km '; } ?></option>
</select>
<select name="o">
<option <?php if ( $o == '1' ) { echo 'value="1" selected="selected" >from nearest to furthest '; }
else { echo 'value="1" >from nearest to furthest '; } ?>
</option>
<option <?php if ( $o == '2' ) { echo 'value="2" selected="selected" >from furthest to nearest '; }
else { echo 'value="2" >from furthest to nearest '; } ?>
</option>
</select>
Here is the PHP part with the 3 variables a (from a text input), d and o.
$a = isset($_GET['a']) ? $_GET['a'] : '';
$d = isset($_GET['d']) ? $_GET['d'] : '';
$o = isset($_GET['o']) ? $_GET['o'] : '';
if ( !empty($_GET['a']) )
{
$request = mysqli_query($sql,"
SELECT *
FROM adresses
WHERE adress = '".$a."' HAVING distance <= ".$d." order by ".$o."");
}
Here is the final result :
echo '<div id="result">';
while ( $row = mysqli_fetch_array($request) )
{
echo '<p>'.$row['shop'].' | '.$row['adress'].' | '.echo $row['town'].'</p>';
}
echo '</div>';
I've never used AJAX before and I would like to know how to run a query like this one above.
Here is my attempt for the AJAX part (not sure about the syntax) :
<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#result").change(function(){
var a = $(this).val();
var d = $(this).val();
var o = $(this).val();
$.ajax({
type: "GET",
url: "test.php",
data: { a: $a, d: $d, o: $o } ,
success: function(result){
$("#result").html(result);
}
});
});
});
</script>
Please, could you tell me what am I supposed to put in the test.php file ?

Answer 1

In test.php you should gather data from the server, ie, MySQL.
$a = isset($_GET['a']) ? $_GET['a'] : '';
$d = isset($_GET['d']) ? $_GET['d'] : '';
$o = isset($_GET['o']) ? $_GET['o'] : '';
if ( !empty($_GET['a']) )
{
$request = mysqli_query($sql,"
SELECT *
FROM adresses
WHERE adress = '".$a."' HAVING distance <= ".$d." order by ".$o."");
}
echo '<div id="result">';
while ( $row = mysqli_fetch_array($request) )
{
echo '<p>'.$row['shop'].' | '.$row['adress'].' | '.echo $row['town'].'</p>';
}
echo '</div>';
Whatever php script returns (echo in case above) it will be in your result variable here:
success: function(result){
$("#result").html(result);
}
Few more things.
You are defining variables incorrectly, it should be:
var a = $('#a').val();
var d = $('#d').val();
var o = $('#o').val();
For this to work you need to assign id to your select's
<select name="d" id="d">
JS variable don't have $ sign, so the variable you sending to test.php should be:
data: { a: a, d: d, o: o }
Note: None of above is tested, just copy/paste of your code to get you on the right track.