Display Database Values on Different HTML Dropdown Selections

Question

I have a dropdown list that is imported with data from a table in a database. Depending on what is selected, I want to display a table that shows the necessary information that correlates to the number that was selected in the dropdown list. So, for example, if I select a MR_ID of 1 in the dropdown list, I want the Supp_ID values (can be more than 1 value) to be displayed in a table. How can I do this?

The table is only 2 columns, MR_ID (which is what is displayed in the dropdown list) and Supp_ID.

Here are my queries used for the foreach loops, my HTML/PHP that I have so far, also followed by the little bit of JavaScript

$dbh = new PDO( "sqlsrv:server=".$host."; Database=".$dbName, $dbUser, $dbPass);
$dbh->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
$sql = "SELECT DISTINCT CAST(MR_ID AS INT) AS MR_ID FROM Table_Name";
$sql_one = "SELECT CAST(Supp_ID AS INT) AS Supp_ID FROM Table_Name";

$users = $dbh->query($sql);
$users_one = $dbh->query($sql_one);

HTML/PHP:

    <!-- Dropdown List -->
    <select name="master_dropdown" id="mr_id" onChange="updatetable(this.form);">
    <option selected value="select">Choose a MR_ID</option>
        <?php foreach($users->fetchAll() as $user) { ?>
            <option data-name="<?php echo $user['MR_ID'];?>">
                <?php echo $user['MR_ID'];?>
            </option>
        <?php } ?>
    </select>
</form>

<!-- Table -->
<p> 
    <div id="table_div">
        <table border="1" id="index_table" class="ui-widget ui-widget-content">
            <thead>
                <tr class="ui-widget-header">
                <td>MR ID</td>
                <td>Supplier ID</td>
                <td>Edit</td>
                </tr>
            </thead>
            <?php foreach($users_one->fetchAll() as $supp) { ?>
            <tr>
                <td class="mr_id"><div id="dropdown_selection"></div></td>
                <td class="supp_id"><?php echo $supp['Supp_ID']?></td>
                <td><input type="button" class="edit" name="edit" value="Edit">
            </tr>
            <?php } ?>
        </table>
    </div>

This JavaScript code reads what was selected in the dropdown list but that is the extent of what it does.

function updatetable(myForm) {

    var selIndex = myForm.master_dropdown.selectedIndex;
    var selName = myForm.master_dropdown.options[selIndex].text;
    document.getElementById("dropdown_selection").innerHTML = String(selName);
}

what is the relation with MR_ID and SUPP_ID? there is no relation in the table for the selected MR_ID — ScanQR
– ScanQR, Commented Dec 9, 2016 at 13:32
The MR_ID field is related to a field in another table that is not being used here. There is no relation to the Supp_ID as far as I'm concerned though. — Rataiczak24
– Rataiczak24, Commented Dec 9, 2016 at 13:34
Are you looking to Ajax the data in, or are you simply going to store the data in a javascript variable that basically then fills the tables when you change the option? — A. L
– A. L, Commented Dec 9, 2016 at 13:40
Not exactly sure...what would be best? I would be open to either method in order to fix this problem — Rataiczak24
– Rataiczak24, Commented Dec 9, 2016 at 13:42
Typically, ajaxing is best, as you can call the data you only need. — A. L
– A. L, Commented Dec 9, 2016 at 13:43

A. L · Accepted Answer · 2016-12-09 14:49:04Z

1

The ajax should look something like this:

$.ajax ({
    url: "table_drawing.php",
    method: "get", //can be post or get, up to you
    data: {
        mr_id : mr_id    
    },
    beforeSend: function () {
        //Might want to delete table and put a loading screen, otherwise ignore this
        // $("#table_div").html(loading_screen);
    },
    success: function(data){
        $("#table_div").html(data); // table_div is the div you're going to put the table into, and 'data' is the table itself.
    }
});

In table_drawing.php you will be drawing the table based off of mr_id's input.

edited Dec 9, 2016 at 14:49

answered Dec 9, 2016 at 14:13

A. L

12.7k29 gold badges100 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rataiczak24 Over a year ago

Sorry to bother again, but if you see this can you join in on our chat that is in the comments above? I have a question.

Collectives™ on Stack Overflow

Display Database Values on Different HTML Dropdown Selections

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related