How can i populate a combobox depending on the selected value of a different combobox?

Question

All I want to do is send the value of the option selected from slct1 in my cb_insumo_update.php and also populate slct1 with cb_insumo_update.php without needing to refresh the page or using a form button.

I tried ajax but I'm kind of new to it so I don´t know how to make it work.

The thing is that I'm using a database to populate the select tags and kinda got confused along the way:

<section class="container">

    <div class="row" >

      <div class="input-field  col s12" >
        <select id="slct1" name="slct1" onchange="populate('slct1','slct2')">
          <?php  require('php/cb_categoria_update.php');  ?>
        </select>
        <label>Categoría</label>
      </div>


      <div class="input-field col s12" method="GET">
        <select id="slct2" name="slct2">
         </select>  
        <label>Insumo</label>
      </div>

    </div>
</section>

cb_categoria_update

<?php 

require('Connect.php');

$CB_cate = mysqli_query($enlace,"SELECT * FROM vw_display_catego_insumo");

    echo "<option empty disabled selected>Elija una opción</option>";

while($row = mysqli_fetch_array($CB_cate))
{
    $idcat = $row['fn_idCategoInsumo'];
    $nomcat = $row['fc_NomCategoInsumo'];


    echo "<option value='" . $idcat . "'>" . $nomcat . "</option>";

}


mysqli_close($enlace);

?> 

cb_insumo_update

<?php 

require('Connect.php');


 $cateinsumo=$_POST['cbidcategoria'];


    $spinsumo="call SP_INSUMOS_BY_CAT('".$_POST['cbidcategoria']."')";

    $sqlspinsumo = mysqli_query($enlace, $spinsumo); 

    $sqlarray = mysqli_fetch_array($sqlspinsumo);


    echo "<option disabled selected>Elija una opción</option>";



while($row = mysqli_fetch_array($sqlspinsumo))
{
    $idinsumo = $row['fn_IdInsumo'];
    $nominsumo= $row['fc_NomInsumo'];

    echo "<option value='" . $idinsumo . "'>" . $nominsumo . "</option>";

}


mysqli_close($enlace);

?>

Answer 1

I will use jQuery as an example, it's just easier to throw together than vanilla JavaScript, so you would need the jQuery library in your header (or at the bottom of your page):

<section class="container">
    <div class="row" >
      <div class="input-field col s12" >
        <select id="slct1" name="slct1">
          <!-- You can keep this as is -->
          <?php require('php/cb_categoria_update.php');  ?>
        </select>
        <label>Categoría</label>
      </div>
      <div class="input-field col s12" method="GET">
        <!-- Use a jQuery event listener instead of the inline onchange -->
        <select id="slct2" name="slct2">
         </select>  
        <label>Insumo</label>
      </div>
    </div>
</section>

<script>
// Document ready
$(function(){
    // Listen for change on first drop down
    $('#slct1').on('change', function(){
        // Run ajax
        $.ajax({
            // Set the url for the file you want to load into current page
            'url': 'cb_insumo_update.php',
            // You could use GET here, I just use post
            'type': 'post',
            // Fetch the value of the current selected option
            'data': $(this).val(),
            // Take the html result from the php page
            'success': function(response) {
                // Place it into this page
                $('#slct2').html(response);
            }
        });
    });
});
</script>

An important note, you will want to bind parameters on this query:

$spinsumo="call SP_INSUMOS_BY_CAT('".$_POST['cbidcategoria']."')";

This is not a secure way to run SQL queries.

Alternately, you can do the "Shorthand" methods for the ajax found on this page .