PHP - populate a select drop down from MySQL DB and have that field auto-populated in a form

Question

I am trying to accomplish two things with the code below. Firstly I want my select options to be populated form my database. Secondly I want the field in the form to have the stored value selected on page load (like in a profile for a member). The way I have implemented below works, kind of, but I have two problems. Firstly if you open the dropdown then the selected option appears twice (once at the top and once in its normal position). Secondly if it is a required field then the user has to open the dropdown and select it again, even though it is appearing in the field (horrible ux). If it is not a required field the form acts as if nothing is selected and I get a Undefined index error further down the line. I am very sure there is a better way to implement what I am trying to achieve that wont give me these problems... all help greatly appriciated.

<?php

$query6 = "SELECT catname FROM travisor_catagory";
$result6 = mysqli_query($conn, $query6) or die(mysqli_error($conn));

$queryread3 = "SELECT * FROM travisor_catagory WHERE id = $catagory";
$result3 = mysqli_query($conn, $queryread3) or die(mysqli_error($conn));

if (mysqli_num_rows($result3) > 0) {

    while ($row = mysqli_fetch_assoc($result3)) {

        $cat = $row["catname"];

    }
}

echo   "<div class='form-group'>
        <label>Catagory *</label>
        <select class='form-control' name='catagory' required>
        <option disabled selected value> $cat </option>";

            if (mysqli_num_rows($result6) > 0) {
                while ($row2 = mysqli_fetch_assoc($result6)) {
                    $catagory2 = $row2["catname"];
                    echo "<option>$catagory2</option>"; 
                }
            }

echo    "</select>"

?>

Answer 1

Don't mix things up so much.....

When you get into larger programs, you will get lost really quickly, so KISS!!!

You can 'jump' in/out of HTML and back to PHP to echo the $options variable, then back to HTML to complete the select. (this is my description of it when I teach newbies - this concept of 'jump in/out' works for PHP, HTML, JS - well any languages that you can combine in one page... - it is worth grasping the concept!)

First, get the options you will need with ONE query (watch how we take care of the selected one as well) - this will make a 'packet' of data in the $options variable.

<?php
    // declare some values that we'll use later
    $options = '';
    // gather the data for the options
    $sql = "SELECT id, catname FROM travisor_catagory";
    $result = mysqli_query($conn, $sql);
    if (mysqli_num_rows($result) > 0) {
        while ($row = mysqli_fetch_assoc($result)) {
            $selected = '';
            if($category == $row['id']){
                $selected = "selected";
            }
            $options .=  '<option ' . $selected . ' value="' . $row["id"] . '">" . $row["catname"] . "</option>"; 
        }
    }
// now we will 'jump' out of PHP and back to HTML
?>
<!-- we are in HTML, so comments and language changed... -->
<div class='form-group'>
    <label>Catagory *</label>
    <select class='form-control' name='catagory' required>
        <!-- here we 'jump' out of HTML and into PHP to use the $options variable -->
        <?php echo $options; // and back out of PHP to HTML... ?>
        <!-- where we finish up our select and whatever other HTML things -->
    </select>
</div>

That should take care of both your issues with what you had.....

BTW, it looks like you are using Bootstrap - if so, I HIGHLY recommend you check this out (changed my life about fighting with select boxes! :) Bootstrap Select