根据下拉选择mysqli自动填充文本输入字段

Question

I've created a dropdown list that is populated by data from my mysql db and programmed using php. What I need to do is populate a text field based on the selection made in the dropdown. Unfortunately, my question differs from the others asked on this forum because most are simply typing all of their options into a html form. Mine are contained within a table and I do not want to save the content in the text field to my database...it will be used for user reference only.

I've read a plethora of forum posts on this site and numerous others and have tried using jquery, javascript, and ajax scripts, but for some reason the only thing I've been successful in getting to appear in the text field is the id of the corresponding item selected from the dropdown list. I think it is important to know that both fields come from the same table in the db, so I can't figure out why it is so difficult to automatically populate the field. I would like to use javascript because I want everything in this one file.

This is the code in the php form:

<?php
        '<div id="trxdetailstable">';

        echo '<table align="center" width="750px" cellspacing="0" border=".5px" ! important><tr>
         <th>Movie Title</th><th>Category</th><th>Price</th></tr>'; 
        echo '<td align="left" width="8%" height="25px">';
            $ddlquery4 = "SELECT id, title, categoryname FROM dvd ORDER BY title ASC";
            $ddlresult4 = mysqli_query($dbc, $ddlquery4) or die("Bad SQL: $ddlquery4");

            echo '<select class="dropdown" name="dvdid" id="dvdid" size="1" onchange="updatecat()">';
            while($ddlrow4=mysqli_fetch_array($ddlresult4, MYSQLI_ASSOC)){

                $categoryname = $ddlrow4['categoryname'];

            echo "<option data-categoryname='' value='".$ddlrow4['id']."'>" . $ddlrow4['title'] . "</option>";

            } //End while statement
            echo "</select>";
            echo '</a></td>';
            echo '<td align="left" width="10%">';
            echo '<input required id="categoryname" name="categoryname" type="text" readonly="readonly">';
            echo '</a></td>';

This is the code I currently have in the html head:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

This is the code that is currently generating no results (text field is left blank after a dropdown item is selected):

$('#dvdid').change(function(e){
    var optionChange = $('#dvdid option:selected').text();
    $('#categoryname').val(optionChange);
});
</script>

And this is the code that actually gave me the primary key (id) for the item selected in the dropdown list (I want it to be the categoryname):

<script>
    function updatecat(id){
    if (id === "") {
        $("input[name=categoryname]").val("");
    } else {
        $("input[name=categoryname]").val(id);            
    }
}
</script>

I have about 3 other scripts I've tried, but they all left the text (category) field blank.

Any advice would be appreciated. Please keep in mind all of my data is generated from a database not manually entered. Thanks.

Answer 1

For others using html/php and searching for a way to auto populate a text field based on the selection made in a dropdown fed from data held in their mysql db (and only use one file) here is what FINALLY worked for me:

In html head:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

In html/php portion:

echo '<td align="left" width="8%" height="25px">';
            $ddlquery4 = "SELECT id, title, categoryname FROM dvd ORDER BY title ASC";
            $ddlresult4 = mysqli_query($dbc, $ddlquery4) or die("Bad SQL: $ddlquery4");

            echo '<select type="text" class="dropdown" name="dvdid" id="dvdid" size="1" onchange="updatecat()">';
            while($ddlrow4=mysqli_fetch_array($ddlresult4, MYSQLI_ASSOC)){

            echo "<option value='".$ddlrow4['id']."' data-categoryname='".$ddlrow4['categoryname']."'>" . $ddlrow4['title'] . "</option>";

            } //End while statement
            echo "</select>";
            echo '</a></td>';
            echo '<td align="left" width="10%">';
            echo '<input type="text" id="categoryname" name="categoryname" readonly="readonly" value="">';
            echo '</a></td>';

In HTML area at end of file:

<script>
$('#dvdid').change(function() {
    selectedOption = $('option:selected', this);
    $('input[name=categoryname]').val( selectedOption.data('categoryname') );
 });
</script>

I sincerely hope this prevents someone else from having to go the days of trial and error and endless searching and reading that I went through.