Dynamically Update drop down value 2 according to selection of drop value 1 inside a modal in PHP

Question

I have two drops downs on my page.

1. I have a drop directly taken from DB.
2. I have a drop totally depends on the selection from dropdown 1 and taken from db.

I have both of these drop-downs inside a modal. I am not sure how to insert the javascript variable to dropdown 2.

Here is my code:

Dropdown 1:

<select class="selectpicker form-control mt-2" id="schoolname" name="schoolname" data-width="" title="School" onChange=reload(this.form)>   
<?php 
 $prod_query = "SELECT * FROM my_school_class";
 $prodresult = mysqli_query($DBconnect, $prod_query);
 while($r = mysqli_fetch_array($prodresult)) 
 {
   if (!empty($schoolName) && $schoolName == $r['schoolName']) 
   {
     $selected = 'selected="selected"';
   } 
   else 
   {
      $selected = '';
   } 

   echo "<option ".$selected." value=".$r['schoolName'].">".$r['schoolName']."</option>"; 
 } ?>
</select>

Dropdown 2:

<select class="selectpicker form-control mt-2" id="classname" name="classname" data-width="" title="class">   
    <?php 
     $prod_query = "SELECT * FROM my_class WHERE school="JAVASCRIPT VARIABLE SHOULD COME HERE";
     $prodresult = mysqli_query($DBconnect, $prod_query);
     while($r = mysqli_fetch_array($prodresult)) 
     {
       echo "<option ".$selected." value=".$r['className'].">".$r['className']."</option>"; 
     } ?>
    </select>

Javascript writing correctly to console:

<script language=JavaScript>
function reload(form)
{
    var val=form.schoolname.options[form.schoolname.options.selectedIndex].value;
    console.log (val);
}

The above variable prints the selection correctly on the console in chrome.

And I have all these inside a modal. Let me know how to fix this?

Thanks!

Answer 1

Call ajax like this (pure vanilla js)

    function reload(form)
    {
        const id = form.schoolname.options[form.schoolname.options.selectedIndex].value

        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/fetch_second.php/');
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        xhr.onload = function() {
            if (xhr.status === 200) {
                const data = xhr.responseText
                let elem = document.querySelector( 'css-selector (#container id)')
                elem.appendChild(responseText)
                
            }
            else if (xhr.status !== 200) {
                console.log('Request failed.  Returned status of ' + xhr.status);
            }
        }
        xhr.send(encodeURI('id=' + id))

    }

and change

this css-selector (#container id) to your container id or className from your modal

And in your fetch_second.php

        $schoolName = $_POST['id']; 

        $prod_query = "SELECT * FROM my_class WHERE school='$schoolName'";
        $prodresult = mysqli_query($DBconnect, $prod_query);
        while($r = mysqli_fetch_array($prodresult)) {
            
            echo "<option value=".$r['className'].">".$r['className']."</option>";

        } 

Answer 2

use this using JQUERY index.html

  $(document).on('change','#schoolname',function(){
     var schoolname = $('#schoolname').val();
     $('#classname').empty();
     $('#classname').append('<option value="" disabled selected>Choose your option</option>');
     $.ajax({
                 url: 'GetClassname.php',
                 type: 'POST',
                 data: {schoolname : schoolname },
                 success: function(data) {
                    $('#classname').append(data);
                 }
             });
  });

GetClassname.php

<?php
include('../config.php');
$schoolname = $_POST['schoolname'];
    
$prod_query = "SELECT * FROM my_class WHERE school='$schoolName'";
$prodresult = mysqli_query($DBconnect, $prod_query);
while($r = mysqli_fetch_array($prodresult)) {
    echo "<option ".$selected." value=".$r['className'].">".$r['className']."</option>"; 
} 
?>