Home/ Questions/Q 5961661
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T18:59:46+00:00

I’m trying to show all files in a folder with php and place a

  • 0

I’m trying to show all files in a folder with php and place a radio button next to each image. When a radio button is selected I’d like redisplay the image somewhere on the page. the end goal is to have three collections of images, and the user can select three and see the selection together, as a triptych.

I know that i must implement some onclick code, but I don’t know how to go about doing it.

my code:

 <?php


$dir = "image_gallery/";

//open dir
if ($opendir = opendir($dir))
{
 //read dir
while (($file = readdir ($opendir)) !==FALSE)
 { 
    if ($file!="."&&$file!=".."&&$file!="DS_Store")
    echo "<img src='$dir/$file' width='200'><input type='radio' value='$file' name='filename'><br>";
    //echo "<input type='radio' value='yes' name='$file' />";

 }

}

?>
 <input type="submit" name="submit" value="That's Right!">

 </form>
</body>
</html>

I’m hoping to be able to display the $file variable onclick rather than reading all the image sources into an array and call upon the nth entry of the array.

I appreciate any input.

also a link to working code, http://www.evan-livingston.com/test/list.php

EDIT

non functioning code;

  <html>
<head>
<script type="text/javascript">
function listSelectedImages() {
    var selected = $('input[type=radio]:checked'),
        selection = $.map(selected, function(e){
            return e.value;
        });
    $('#selection').text(selection.join(', '));
}

$('input[type=radio]').change(listSelectedImages);
</script>
</head>
<body>
<form action="bad_words.php" method=post>
    <a href="../main.page.php">back to main page</a>
    <br/>
    <br/>

    <img src='image_gallery//11.01.29.3-13.jpg' width='200'>
    <input type='radio' value='11.01.29.3-13.jpg' name='filename'>

    <br>
    <img src='image_gallery//11.01.29.3-3.jpg' width='200'>
    <input type='radio' value='11.01.29.3-3.jpg' name='filename'>

    <br>
    <input type="submit" name="submit" value="That's Right!">

</form>
<div id="selection"></div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    @Dagon means (in the comments to your question), that you have to deal with the events triggered by a selection (change) of an image in the browser (using Javascript) rather than on the server (using PHP).

    I understand that you want to list the values of the selected radio buttons somewhere next to the list?
    Here’s a simple example using jQuery which does that to get you started:

    function listSelectedImages() {
    var selected = $('input[type=radio]:checked'),
        selection = $.map(selected, function(e){
            return e.value;
        });
    $('#selection').text(selection.join(', '));
} 
// This will ensure that the inputs you're trying to access
// are actually loaded onto the page already
$(function(){
    $('input[type=radio]').change(listSelectedImages);
});

    Working example: http://jsfiddle.net/dXUYb/

    UPDATE

    In order to show the images rather than a list of file names, you could e.g. do something like this:

    function listSelectedImages() {
    $('input[type=radio]:checked')
        .prev('img')
        .clone()
        .insertAfter('#selection');
}

$('input[type=radio]').change(listSelectedImages);

    I would recommend to wrap the images and inputs in <label> tags to allow clicking on the image itself as well too select it.
    Here’s an updated example: http://jsfiddle.net/dXUYb/5/

    • 0