title: display image onclick inside of php
body: <p>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. </p>
  
  <p>I know that i must implement some onclick code, but I don't know how to go about doing it.</p>
  
  <p>my code:</p>
  
  <pre><code> &lt;?php
  
  
  $dir = "image_gallery/";
  
  //open dir
  if ($opendir = opendir($dir))
  {
   //read dir
  while (($file = readdir ($opendir)) !==FALSE)
   { 
      if ($file!="."&amp;&amp;$file!=".."&amp;&amp;$file!="DS_Store")
      echo "&lt;img src='$dir/$file' width='200'&gt;&lt;input type='radio' value='$file' name='filename'&gt;&lt;br&gt;";
      //echo "&lt;input type='radio' value='yes' name='$file' /&gt;";
  
   }
  
  }
  
  ?&gt;
   &lt;input type="submit" name="submit" value="That's Right!"&gt;
  
   &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>I appreciate any input.</p>
  
  <p>also a link to working code, <a href="http://www.evan-livingston.com/test/list.php" rel="nofollow">http://www.evan-livingston.com/test/list.php</a></p>
  
  <p>EDIT</p>
  
  <p>non functioning code;</p>
  
  <pre><code>  &lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript"&gt;
  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);
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form action="bad_words.php" method=post&gt;
      &lt;a href="../main.page.php"&gt;back to main page&lt;/a&gt;
      &lt;br/&gt;
      &lt;br/&gt;
  
      &lt;img src='image_gallery//11.01.29.3-13.jpg' width='200'&gt;
      &lt;input type='radio' value='11.01.29.3-13.jpg' name='filename'&gt;
  
      &lt;br&gt;
      &lt;img src='image_gallery//11.01.29.3-3.jpg' width='200'&gt;
      &lt;input type='radio' value='11.01.29.3-3.jpg' name='filename'&gt;
  
      &lt;br&gt;
      &lt;input type="submit" name="submit" value="That's Right!"&gt;
  
  &lt;/form&gt;
  &lt;div id="selection"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>