Question

I’ve this code to get the name of files and add them to a drop-down list:

<?php
$dir = "uploads";
$dh = opendir($dir);
echo "<select name=case>"; 
while (($file = readdir($dh)) !== false) {
    $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
    $name = (pathinfo($file, PATHINFO_FILENAME));
    if ($file != "." && $file != ".." && $ext == "jpg") 
    {
        echo "<option value=".$dir."/".$file .">" . $name . "</option>"; 
    }
}
echo "</select>"; 
closedir($dh);
?>

Now I’d like to add a submit button and print the file path (value) of the selected item from the drop-down list on the same page.

Answer 1

1. Add an ID to your <select> element:

   echo "<select id='selCase' name='case'>"; 
   

2. Insert an element which will contain the selected value

   // After closedir($dh);
   echo "<div id='divOut'></div>";
   

3. Insert a snippet of JavaScript:

   document.addEventListener("ready", function () {
     document.getElementById("selCase").addEventListener("change", function () {
       var val = this.options[this.selectedIndex].value;
       document.getElementById("divOut").innerHTML = val;
     });
   });
   

But I would recommend you reading websites/books/tutorials about JavaScript development!