skip to Main Content

I tried to implement a dependent drop down lists system. The code in contact.php page is:

<?php 
    $link = new mysqli("localhost", "root", "", "graphicdesign");
    if($link->connect_error){
        die("ERROR: Nu s-a putut realiza conexiunea la baza de date " .$link->connect_error);
    }

    $resultSet = $link->query("SELECT * FROM orase") or die('Error In Session');
    /* $rowsn = mysqli_fetch_array($resultSet);
    $n_oras=$rowsn['denumire_oras'];
    $id_orasss=$rowsn['id_oras'];    */                                         

    //$resultSetRep = $link->query("SELECT id_oras, denumire_rep FROM reprezentante where id_oras='$id_oras'") or die('Error In Session');                                                  
    //$rows1= mysqli_fetch_array($resultSetRep);
?>

<!DOCTYPE HTML>
<html>

<head>
    --head info
</head>

<body>
    <form action="#">

        <div class="row form-group">
            <div class="col-md-12">
                <label style="margin-right:15px;">Oras</label>
                <select id="denum_oras" name="den_oras">
                    <?php
                        while($rows = mysqli_fetch_array($resultSet)) {
                            $n_oras=$rows['denumire_oras'];
                            $id_oras=$rows['id_oras'];                                              
                            echo "<option value='$id_oras'>$n_oras</option>";
                        }
                    ?>
                </select>
            </div>
        </div>

        <div class="row form-group">
            <div class="col-md-12">
                <label style="margin-right:15px;">Reprezentanta</label>
                <select id="reprez" name="reprez">
                    <?php
                        while($rows2=$resultSet->fetch_assoc()) {
                            $id_oras=$rows2['id_oras'];
                            $den_rep=$rows2['denumire_rep'];

                            $resultSetRep = $link->query("SELECT id_oras, denumire_rep FROM reprezentante where id_oras='$id_oras'") or die('Error In Session');

                            while($rows3=$resultSetRep->fetch_assoc()) {
                                $id_rep = $rows3['id_rep'];
                                $den_rep = $rows3 ['denumire_rep'];

                                echo "<option value='$id_rep'>$den_rep</option>";
                            }
                        } 
                    ?>
                </select>
            </div>
        </div>

    </form>
</body>

</html>

The first drop down list is working, it is retrieving the right data from table “orase” in the database:
enter image description here

But for the second drop down, i want that, when i select the option “Braila” form the first drop down, to show the values from the database with the foreign key “id_oras” as the selected choice.

In this case, when I select “Braila” from the first drop down list, with the id_oras=1 in the table orase, I want that the second drop down list to retrieve data from the table “reprezentante” where id_oras = 1, in this case to retrieve values “Rep Braila” and “Rep Braila 2” to be shown in the drop down, but this is not happening..

enter image description here

This is a capture of the page:
enter image description here

The code i posted is the best one i thought about, but still doesn’t work.. please help me!

Thanks!

3

Answers


  1. PHP is preprocessor language isn’t compile on runtime you can use Ajax or XMLHttpRequest to get the data. After that, you can use Jquery or javascript to bind the data in the select box

    Login or Signup to reply.
  2. You need to use Ajax for accomplishing this task. Using onChange jquery event when parent dropdown value gets changed will populate child or dependent dropdown accordingly.

    Please refer this link: Populate a dropdown list based on selection of another dropdown list using ajax

    Hope this helps.

    Login or Signup to reply.
  3. As others have mentioned you will need to inject a little bit of Javascript into your code.

    Your first Select looks fine, but the second would have to be re-written.

    Put an onchange event into your first select like so:

    <select name="list" id="list" onchange="update(this)">
    

    And a Div to hold your second dropdown list.

    <div id="secondlist">
        // contents of returned html from "getsecondlist.php" will go here
    </div>
    

    Then put the following Javascript inbetween your head tags.
    This will call “getsecondlist.php” and pass a parameter of idoras.
    “getsecondlist.php” will return the second dropdown list, which is stored in this.responseText.

    <script>
    function update(e) {
        idoras = e.options[e.selectedIndex].value;
    
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("secondlist").innerHTML = this.responseText;
            }
        };
        xhttp.open("GET", "getsecondlist.php?idoras=" + idoras, true);
        xhttp.send();
    }
    </script>
    

    getsecondlist.php

    <div class="row form-group">
    <div class="col-md-12">
        <label style="margin-right:15px;">Reprezentanta</label> 
        <select id="reprez" name="reprez">
            <?php
            $id_oras=$_GET['idoras'];
            $resultSetRep = $link->query("SELECT id_oras, denumire_rep FROM reprezentante where id_oras='$id_oras'") or die('Error In Session');
    
            while($rows3=$resultSetRep->fetch_assoc()) {
                $id_rep = $rows3['id_rep'];
                $den_rep = $rows3 ['denumire_rep'];
                echo "<option value='$id_rep'>$den_rep</option>";
            }
            ?>
        </select>
    </div>
    </div>
    

    The $_GET[‘idoras’] gets the parameter sent in from the Javascript call.

    Hope this helps.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search