Run query based on two dropdown and show table PHP

Question

I have two dropdowns, the second dropdown is getting populated by the first dropdown condition. Now, I want to take both dropdowns' conditions and apply it to a query and show the results in a table via HTML.

This is my code,

SCRIPT code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.country').on('change', function() {
    // Code to add country information in url

    location.href = location.href.split('?')[0]
        + ['?country', $(this).val()].join('=');
    });

});

</script>

PHP code first dropdown:

<?php
$countries = mysqli_query($mysqli,"select source from nhws.masterkey group by source;");
echo "<select class='country' name='country' style='width:200px'>"; 
echo "<option size =30 ></option>";
while($row = mysqli_fetch_array($countries)){        
    echo "<option value='".$row['source']."'>".$row['source']."</option>"; 
}
echo "</select>";
if (isset($_GET['country'])) {
    $country = $_GET['country'];
    echo "<p></p>";
    echo "$country is the selected data set";
    echo "<p></p>";
}
?>

PHP code second dropdown:

<?php
if (isset($_GET['country'])) {
    echo "<h5>Choose variable</h5>";
    $variables = mysqli_query($mysqli,"select variable from nhws.num_all_{$country} group by variable;");
    echo "<select class='variable' name='variable' style=width:200px>"; 
    echo "<option size =30 ></option>";
    while($row = mysqli_fetch_array($variables)) {        
        echo "<option value='".$row['variable']."'>".$row['variable']."</option>"; 
    }
    echo "</select>";
}
?>

Now, the last PHP code to display the results table:

<?php
if (isset($_GET['variable'])) {
    $results = mysqli_query($mysqli,"select q1.variable, q1.numvalue, description, num_cases
    from (select variable, numvalue, count(variable) as num_cases 
    from nhws.num_all_{$country} 
    where variable = '{$variable}'
    group by variable, numvalue) q1
    inner join (select * from nhws.luvalues where source = '{$country}' and variable = '{$variable}')
    t2 on q1.numvalue=t2.numvalue;");
    echo "<h5>Counts</h5>";
    if ($results->num_rows > 0) {
         echo "<table><tr><th>Variable</th><th>Numvalue</th><th>Description</th><th>Num Cases</th></tr>";
         // output data of each row
         while($row = $results->fetch_assoc()) {
                echo "<tr><td>" . $row["variable"]. "</td><td>" . $row["numvalue"]. "</td><td>" . $row["description"]. "</td><td>" . $row["num_cases"]. "</td></tr>";
         }
         echo "</table>";
    } else {echo "0 results";} 
}
?>

Once selecting all the dropdown option nothing happens. The query doesn't even run. It looks like it doesn't go through the if (isset($_GET['variable'])) statement.

How can make it to work?

Thanks!

Answer 1

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.country').on('change', function() {
    // Code to add country information in url

    location.href = location.href.split('?')[0]
        + ['?country', $(this).val()].join('=');
    });

    $('.variable').on('change', function() {
    // Code to add country information in url

    location.href = location.href.split('?')[0]
        + ['?variable', $(this).val()].join('=');
    });

});

</script>

PHP code first dropdown:

<?php
$countries = mysqli_query($mysqli,"select source from nhws.masterkey group by source;");
echo "<select class='country' name='country' style='width:200px'>"; 
echo "<option size =30 ></option>";
while($row = mysqli_fetch_array($countries)){        
    echo "<option value='".$row['source']."''>".$row['source']."</option>"; 
}
echo "</select>";
if (isset($_GET['country'])) {
    $_SESSION['country'] = $_GET['country'];
    echo "<p></p>";
    echo $_SESSION['country'].' is the selected data set';
    echo "<p></p>";
}
?>

PHP code second dropdown:

<?php
if (isset($_GET['country'])) {
    echo "<h5>Choose variable</h5>";
    $variables = mysqli_query($mysqli,"select variable from nhws.num_all_{$country} group by variable;");
    echo "<select class='variable' name='variable' style=width:200px>"; 
    echo "<option size =30 ></option>";
    while($row = mysqli_fetch_array($variables)) {        
        echo "<option value='".$row['variable']."'>".$row['variable']."</option>"; 
    }
    echo "</select>";
}
?>

Now, the last PHP code to display the results table:

<?php
if (isset($_GET['variable'])) {
    $_SESSION['variable'] = $_GET['variable'];
    $results = mysqli_query($mysqli,"select q1.variable, q1.numvalue, description, num_cases
    from (select variable, numvalue, count(variable) as num_cases 
    from nhws.num_all_{$country} 
    where variable = '{$variable}'
    group by variable, numvalue) q1
    inner join (select * from nhws.luvalues where source = '{$_SESSION['country']}' and variable = '{$_SESSION['variable']}')
    t2 on q1.numvalue=t2.numvalue;");
    echo "<h5>Counts</h5>";
    if ($results->num_rows > 0) {
         echo "<table><tr><th>Variable</th><th>Numvalue</th><th>Description</th><th>Num Cases</th></tr>";
         // output data of each row
         while($row = $results->fetch_assoc()) {
                echo "<tr><td>" . $row["variable"]. "</td><td>" . $row["numvalue"]. "</td><td>" . $row["description"]. "</td><td>" . $row["num_cases"]. "</td></tr>";
         }
         echo "</table>";
    } else {echo "0 results";} 
}
?>

FYI...you don't NEED the $(document).ready, the on() method will still attach just put the javascript code AFTER the selects already exist on the page.