Dynamically update dropdown based on previous selection with PHP PDO

Question

This has been answered before, however I'm asking again for two reasons: I can't find any resources that utilize PDO, and regardless of that, all of the ones I've found consist of code without any comments or explanations, which makes it hard to interpret and adapt them to my use case.

I need to be able to make a dropdown dynamically update itself based on the selection of the previous one, and if I change that selection, it should re-update itself without having to submit the form or reload the page.

I've updated the code with what I've learned and found so far, but it's still not working properly. Everything works up to the point where the second dropdown should begin loading values.

HTML:

<div class="form-group row">
    <label class="col-sm-2 form-control-label" onchange="productorInfo(this.value);">Codigo Productor (*)</label>
    <div class="col-sm-4">
        <select name="vendedor_codigo">
            <?php foreach ($dd_productor_result as $dd_productor_display) : ?>
            <option value="<?= $dd_productor_display['vendedor_codigo']; ?>">
                <?= $dd_productor_display['vendedor_codigo']; ?>
            </option>
            <?php endforeach; ?>
        </select>
    </div>
    <label class="col-sm-2 form-control-label">Nombre (*)</label>
    <div class="col-sm-4">
        <select id="ajax-vendedor" name="vendedor_nombre">
            <?php foreach ($ajax_productor_result as $dd_productor_display) : ?>
            <option placeholder="Seleccione codigo" value="<?= $dd_productor_display['vendedor_nombre']; ?>">
                <?= $dd_productor_display['vendedor_nombre']; ?>
            </option>
            <?php endforeach; ?>
        </select>
    </div>
</div>

Ajax script:

function productorInfo(id) {
    $.ajax({
        type: "GET",
        url: "/controller/produccion/db_ajax_update.php",
        data: "mainid =" + id,
        success: function (result) {
            $("#ajax-vendedor").html(result);
        }
    });
};

First dropdown PHP code:

$dd_productor = "SELECT vendedor_codigo FROM lista_productores";

$productor_stmt = $pdo->prepare($dd_productor);
$productor_stmt->execute();
$dd_productor_result = $productor_stmt->fetchAll();

Second dropdown (ajax call):

if(isset($_GET['mainid'])){
productorInfo($_GET['mainid']);
$prod_value = productorInfo($_GET['mainid']);
}
$ajax_productor = "SELECT vendedor_nombre FROM lista_productores WHERE vendedor_codigo = {$prod_value}";

$productor_stmt = $pdo->prepare($ajax_productor);
$productor_stmt->execute();
$ajax_productor_result = $productor_stmt->fetchAll();

It can be done by using ajax call, when changing your drop down value it will fetch data for your desired value. — Muhammad Shareyar, Apr 01 '19 at 05:56

imposterSyndrome · Accepted Answer · 2019-04-13T07:48:58.573

The onchange call should be on the select element not on the label

<label class="col-sm-2 form-control-label">Codigo Productor (*)</label>
<select name="vendedor_codigo onchange="productorInfo(this.value)">

But also it occurs to me you may not quite understand the process. Your ajax call won't be fired when the page loads so this bit:

<select id="ajax-vendedor" name="vendedor_nombre">
            <?php foreach ($ajax_productor_result as $dd_productor_display) : ?>
            <option placeholder="Seleccione codigo" value="<?= $dd_productor_display['vendedor_nombre']; ?>">
                <?= $dd_productor_display['vendedor_nombre']; ?>
            </option>

i would think is giving you undefined variable warnings (unless you are setting $ajax_productor_result initially in some way)

Responses from ajax are usually drawn in .js via success: function

(result) {
            $("#ajax-vendedor").html(result);
        }

from the looks of this though - unless there is more code that what has been posted, you are passing the .html() function an array or database rows so it's never going to display anything.

so you need to 1)draw a select with no options in it on pageload (or default options if you have them) 2)return a response that the success function can make use e.g. a json string which jquery can the parse 3)format the data in jquery into the <options> and then user the .html() function to update the select 4)if you want this to happen when the page initially loads then add in a document ready call to the productorInfo(id) function - this would be relevant if you are setting the initial select value in some way (so it may not be relevant to you)

Dynamically update dropdown based on previous selection with PHP PDO

1 Answers1

Linked