Dynamic dropdown with PHP

Question

Currently, I am doing a dynamic drop-down using PHP. But I have some issues in it. I can't figure it out. It doesn't retrieve the 2nd dropdown values. I did it like below. What I want is when we select a ItemName, The brand names should retrieve to the 2nd dropdown.

AddItem.php - Dropdown code

<?php
require 'GetBrand.php';

$ItemName = LoadItemName();


?>
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">

    $(document).ready(function(){
            $("#ItemName").change(function(){
                var aid = $("#ItemName").val();
                $.ajax({
                    url: 'GetBrand.php',
                    method: 'post',
                    data: 'aid=' + aid
                }).done(function(brand){
                    console.log(brand);
                    brand = JSON.parse(brand);
                    $('#brand').empty();
                    brand.forEach(function(Bname){
                        $('#brand').append('<option>' + Bname.brand + '</option>')
                    })
                })
            })
        })
    </script>
</head>
<body>
<form name="form1" action="AddItem.php" method="post">


     <div class="form-group">
            <label for="text">Item Name</label>
             <table>
                 <tr>
                     <td style=" border: 8px solid transparent; min-width: 150px; width: auto; "><select class="form-control show-tick" name="ItemName" id="ItemName" required>

                        <option value="" disabled="" selected>Select Name</option>
                        <?php foreach($ItemName as $iname)

                          echo "<option id='".$iname['ItemName']."' value='".$iname['ItemName']."'>".$iname['ItemName']."</option>";

                        ?>

                  </select></td>


                 <td style=" border: 8px solid transparent; min-width: 150px; width: auto;padding: 10px 0 0 15px; "><label for="text">Add Item Name : </label></td>

                 <td style=" border: 8px solid transparent; min-width: 150px; width: auto;padding: 10px 0 0 10px;"><input type="text" name="name" id="name"  class="form-control" > </td>

                 <td style=" border: 5px solid transparent;min-width: 150px; width: auto; padding: 10px 0 0 10px;"><button type="submit" class="btn btn-info">Add</button></td>
              </tr>
         </table>
      </div>
  <div class="form-group">

       <label for="text">Brand Name</label>
         <table>
               <tr>
                   <td style=" border: 8px solid transparent; min-width: 150px; width: auto; padding: 10px 0 0 10px; "><select class="form-control show-tick" name="    brand" id=" brand" required>

                     <option value="">Please select</option>

                    </select></td>

                    <td style=" border: 8px solid transparent; min-width: 150px; width: auto;padding: 10px 0 0 15px;"><label for="text">Add Brand : </label></td>

                    <td style=" border: 8px solid transparent;min-width: 150px; width: auto;padding: 10px 0 0 10px;"><input type="text" name="Bname" id="Bname"  class="form-control" > </td>

                   <td style=" border: 5px solid transparent;padding: 10px 0 0 10px;"><button type="submit" class="btn btn-info">Add</button></td>
                 </tr>
            </table>
        </div>
</form>
</body>                           
</html>

Database.php

<?php

class Database{

        private $host = 'localhost';
        private $dbName = 'librarystock';
        private $user = 'root';
        private $pass = '';
        public function connect() {

            try {
                   $conn = new PDO('mysql:host=' . $this->host . '; dbname=' . $this->dbName, $this->user, $this->pass);

                    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

                    return $conn;
                } catch( PDOException $e) {
                    echo 'Database Error: ' . $e->getMessage();
                }
            }

    }
?>

GetBrand.php

<?php
    require "Database.php";

    if(isset($_POST['aid'])){

            $db = new Database;
            $conn = $db -> connect();

            $stmt = $conn->prepare("SELECT * FROM stockdetails WHERE ItemName = "  .$_POST['aid']);
            $stmt -> execute();
            $brand = $stmt->fetchAll(PDO::FETCH_ASSOC);
            echo json_encode($brand);

    }

    function LoadItemName(){

        $db = new Database;
        $conn = $db -> connect();

        $stmt = $conn->prepare("SELECT * FROM stockdetails");
        $stmt -> execute();
        $ItemName = $stmt->fetchAll(PDO::FETCH_ASSOC);
        return $ItemName;

    }


?>

Watch out! Your code is vulnerable to SQL injection. For more information check [What is SQL injection](https://stackoverflow.com/questions/332365/how-does-the-sql-injection-from-the-bobby-tables-xkcd-comic-work) and [How to prevent](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) — Mathias, Apr 05 '19 at 05:45
can you do var_dump($brand); in GetBrand.php before an echo json_encode(); — M.Hemant, Apr 05 '19 at 05:55
Okay I Did that...Still same.. But I am getting errors in console. — , Apr 05 '19 at 06:05

score 1 · Accepted Answer · answered Apr 05 '19 at 05:23

Replace this, There is a space in your id

<select class="form-control show-tick" name="    brand" id=" brand" required>
        <option value="">Please select</option>
</select></td>

With

<select class="form-control show-tick" name="brand" id="brand" required>
        <option value="">Please select</option>
</select></td>

Dynamic dropdown with PHP

1 Answers1