i want when i click on radio button (objectart) on modal then it should change other div data (fetch database) on modal in another div(objecttype)

Question

When I click on the button this modal pops up. Here is my Modal div code: If I click on objectart then objecttype option should be changed on Modal. Objecttype div is calling a function and fetch records according to objectart_id. Through ajax, I am fetching the objectart_id. Please help me.

Modal.php

    <div class="form-group row mb-3">
        <div class="modal" id="myModal">
            <div class="modal-content">
            <div class="modal-header">
                <span class="close" id="shut">&times;</span>
            </div>
            <div class="modal-body row">
                
                <div class="col-lg-3 p-2">
                    <div class="row">
                        <label><input type="radio" name="objektart_id" value="1">&ensp;Room</label>
                        <label><input type="radio" name="objektart_id" value="2" <?php echo ($objectart_id == 2) ? 'checked' : "" ?>>&ensp;Flat</label>
                        <label><input type="radio" name="objektart_id" value="3" <?php echo ($objectart_id == 3) ? 'checked' : "" ?>>&ensp;Haus</label>
                        <label><input type="radio" name="objektart_id" value="4" <?php echo ($objectart_id == 4) ? 'checked' : "" ?>>&ensp;Land</label>
                        <label><input type="radio" name="objektart_id" value="5" <?php echo ($objectart_id == 5) ? 'checked' : "" ?>>&ensp;Office</label>
                      </div>
                </div>
                <div class="col-lg-3 p-2">
                    <div class="row" id="objekttyp">
                        <label class="col-md-12 col-form-label">&ensp;Objecttype</label>
                        <?php echo getObjektartSubtyp($objectart_id); ?>
                    </div>
                </div>
               
                <div class="p-5" id="submit-detail">
                    <button type="submit" class="btn btn-success btn-lg mt-2 mt-sm-0">Search</button>
                </div>
            </div>
    
        </div>

</div>

myFunction.php

function getObjektartSubtyp($ids){

    global $db;
    $sql = 'SELECT * FROM objekt_objektart_subtyp WHERE suche = "J" and objekt_objektart_id = ' . $ids;
    $result = $db->query($sql)->fetchAll();
    $html = '';
    foreach($result as $subtyp){
        $html.= '<label class="col-md-12 col-form-label search-objektart-subtyp" data-objektart="'.$subtyp['objekt_objektart_id'].'">
                    <input type="checkbox" name="objektart_subtyp_id[]" value="'.$subtyp['objekt_objektart_subtyp_id'].'"';
        
            // if(in_array($subtyp->objekt_objektart_subtyp_id, $ids)){ $html.= ' checked="checked"'; }
        
        $html.= '> '.$subtyp['name'].'</label>';
    }
    return $html;

}

Answer 1

Use ajax to fetch details from DB for a particular radio button, then update the objekttype division.

<script>
  var id;
  document.getElementsByName('objektart_id').forEach(item => {
  item.addEventListener('change', event => {
    if(item.checked == true) {
    id = item.getAttribute("object_id");
    //console.log(id); //for debugging
    //Now ajax call
    $.post("somePHP.php",{id: id, type: "get_subType"}, 
      function(data, status){
         if(status == "success"){
           $("#objekttype").html(data);
         }
      })
    };
  })
})
</script>

somePHP.php

if(isset($_POSST['type'])){
    if($_POST['type'] == "get_subType"){
    global $db;
    $id = $_POST['id'];
    $sql = 'SELECT * FROM objekt_objektart_subtyp WHERE suche = "J" and objekt_objektart_id = ' . $ids;
    $result = $db->query($sql)->fetchAll();
    $html = '';
    foreach($result as $subtyp){
        $html.= '<label class="col-md-12 col-form-label search-objektart-subtyp" data-objektart="'.$subtyp['objekt_objektart_id'].'">
                    <input type="checkbox" name="objektart_subtyp_id[]" value="'.$subtyp['objekt_objektart_subtyp_id'].'"';
        
            // if(in_array($subtyp->objekt_objektart_subtyp_id, $ids)){ $html.= ' checked="checked"'; }
        
        $html.= '> '.$subtyp['name'].'</label>';
    }
    echo $html;
    }
}

If you prefer to have a separate function to get subtype you can add_action or call that function on type == 'get_subType'.