Search code examples
phpjquerymysqlhtmldrop-down-menu

Detect where there are no entries for an HTML menu-submenu system


I have MySQL tables looking like this:

regions table

id     |   region
-------------------
1      |   Region1
2      |   Region2

...

and schools table

region_id |   school
-------------------
1         |   schno1
1         |   schno5
1         |   schno6
2         |   scho120 

My page works like this: At first, page populates #regions select menu from db table named "regions". when user selects #region, the JS sends selected region's value to search.php. Server-side PHP script searches db table named "schools" for #region (previously selected menu) value, finds all matches and echoes them.

Now the question is, how can I hide #class and #school select menus, and show only error message "there is no school found in this region" if no matches are found? How to check if there's no result from search.php? I'm a beginner to JS.

My JavaScript looks like this: http://pastie.org/2444922 and the piece of code from form: http://pastie.org/2444929 and finally search.php: http://pastie.org/2444933

Update

I changed my JS but no success.

$(document).ready(function(){
    $("#school").hide();
    $("#class").hide();
searchSchool = function(regionSelect){
var selectedRegion = $("select[name*='"+regionSelect.name+"'] option:selected").val();
if (selectedRegion!='0'){
    $.ajax({
    type: "POST",
    url : "core/code/includes/search.php",
    data: "&region_id="+selectedRegion,
    success: function(result, status, xResponse){
        if (result!=null){
            $("#school").show();
            $("#class").show();
            $("#school").html(result);
        }else{
            $("#error").html("There is no school found in this region");
            $("#school").html('');
            $("#school").hide();
        }
    },
    error: function(e){
        alert(e);
    }
    });
}else{
    $("#error").html('Please select a region first');
    $("#school").html('');        
    $("#school").hide();
    $("#class").hide();
}
}
});

Solution

  • You could try this

    index.php :

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Ajax With Jquery</title>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
        searchSchool = function(regionSelect){
        var selectedRegion = $("select[name*='"+regionSelect.name+"'] option:selected").val();
        if (selectedRegion!='0'){
            $.ajax({
                type: "POST",
                url : "search.php",
                data: "&region_id="+selectedRegion,
                success: function(result, status, xResponse){
                alert(result);
                if (result!=''){
                        $("#school").show();
                        $("#school").html(result);
                    }else{
                        $("#error").html("There is no school found in this region");
                        $("#school").html('');
                        $("#school").hide();
                    }
                },
                error: function(e){
                    alert(e);
                }
            });
        }else{
            $("#error").html('Please select a region first');
            $("#school").html('');        
            $("#school").hide();
        }
    }
    </script>
    </head>
    
    
    <body>
    
        <?php 
    $username="root";
    $password="";
    $database="test";
    
    mysql_connect('localhost',$username,$password);
    @mysql_select_db($database) or die( "Unable to select database");
    $query="SELECT * FROM regions";
    $result=mysql_query($query);
    
    $num=mysql_numrows($result);
    
    mysql_close();
    
    echo "<b><center>Database Output</center></b><br><br>";
    
    ?>
    <select name="region" id="region" onchange="searchSchool(this)">
    <option value="0">Please select a Region</option>
    <?php 
    while($data = mysql_fetch_array( $result )) 
    { 
    ?>
    <option value="<?php echo $data['id']?>"><?php echo $data['name']?></option>
    <?php 
    }
    ?>
    </select>
    
    <select name="school" id="school"></select>
    
    <span id="error"></span>
    
    </body>
    </html>
    

    Search.php:

    <?php 
    
    $username="root";
    $password="";
    $database="test";
    
    mysql_connect('localhost',$username,$password);
    @mysql_select_db($database) or die( "Unable to select database");
    
    if(isset($_POST['region_id'])) {
    $query = "SELECT * FROM schools WHERE region_id='".$_POST['region_id']."'";
    $result=mysql_query($query);
    
    $num = mysql_numrows($result);
    
    if ($num>0){
        while ($row = mysql_fetch_array($result)) {
            echo '<option value="'.$row['id'].'">'.$row['name'].'</option>';
        }
        }
    else{
    return null;
    }
    }
    
    
    mysql_close();
    ?>