Changing image from DropDown List create from MySQL table

General PHP Help
#1

Hello,

I’ve created a dropdown list from a MySQL table. When selected I want each entry in the dropdown list, to change an image shown on the page. I can display the last image in the dropdown list, but cant get it to change there after.

I’ve now included some JavaScript but it is not working!
Any help greatly received

Code:

 <script  language=”Javascript”>

  function setImage(select){
        var image = document.getElementsByName("image-swap")[0];
        image.src = select.options[select.selectedIndex].value;
   }  

 </script>

 <?php
      $servername = "localhost";
      $username   = "xxxx";
      $password   = "xxxxxx";
      $dbname     = "xxxxxx";

    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);
    // Check connection
    if ($conn->connect_error) {
              die("Connection failed: " . $conn->connect_error);
  } 

// Select all data:

echo "All Tartans:<br><br>";

$sql = "SELECT ID, TartanID, Clan, Variation, Manufacturer, Supplement, SupplementVAT, ImagePath FROM Tartan";
$result = $conn->query($sql);

 if ($result->num_rows > 0) 
{
      // output data of each row into dropdown list
     ?>
          <select name="Tartan" id="Tartan" onchange="setImage(this);")
         <?php

     while($row = $result->fetch_assoc()) 
     {
            echo "ID: " . $row["ID"]. "<br>" . 
                     "TartanID: " . $row["TartanID"]. "<br>" . 
                     "Clan: " . $row["Clan"]. "<br>" . 
                     "Variation: " . $row["Variation"]. "<br>" . 
                     "Manufacturer: " . $row["Manufacturer"]. "<br>" . 
                     "Supplement: " . $row["Supplement"]. "<br>" . 
                     "SupplementVAT: " . $row["SupplementVAT"]. "<br>" . 
                     "ImagePath: " . $row["ImagePath"]. "<br>"; 

                     $clan = $row["Clan"];
                     $img_path = $row["ImagePath"];

                     echo "<option value='$Clan' >$clan</option>";
      }
?>
              </select>

<!-- Display Image here -->

      <div class="img-block">
          <img src="<?php echo $img_path; ?>" 
                  name="image-swap" 
                  alt="<?php echo $clan; ?>" 
                  title="<?php echo $clan; ?>" 
                 width="200" 
                 height="200" class="img-responsive" />
       </div>
   <?php   

    }  
   else 
   {
              echo "0 results";
    }
    echo "<br>";

    $conn->close();
#2

To do it with PHP would require submitting a form after changing the selected option.

If you use javascript you can make it change instantly without refreshing the page.

#3

Thanks, I’ve included my attempt at the javascript - but it does not work. Do you have fix? Most appreciated for your help.

#4

I need to see the php code that generates the <select>.

Are the <option> value coming from the database? Are the images regular files on your server with a url or file name stored in the database or is the image data itself stored in the database?

#5

Hi, I’ve included the code in my post. Is it not visible to you??

The options are coming from the database. The images will be stored on the server with a path+image name

The dropdown list works great but I think I have the javascript wrong.
Your help is greatly appreciated.

Regards, Iain

#6

Javascript and PHP exist in 2 entirely different places. They cannot see each other’s variables. They have no relationship or connection or knowledge of each other. What happens in php happens once on your server and the html that results from that is sent to your web browser. All javascript happens in the web browser long after PHP has finished its part of the job.

You should not echo that information (tartan, clan, variation, etc) inbetween the <select> and the <option>. If that information is meant to be displayed on the page it should be echoed outside of the opening tag.

All <script> tags should be placed at the very end of your html document, right before the </body> closing tag. OR your js code should use onload or ondocumentready events to make sure it only runs after the entire web page has been downloaded and understood by the web browser.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<select id="js-choose">
  <option value="apple"  data-img="https://i.imgur.com/CGuDGFN.jpg">Apple</option>
  <option value="orange" data-img="https://i.imgur.com/VPjrc6r.jpg">Orange</option>
  <option value="pear"   data-img="https://i.imgur.com/2ctlULp.jpg">Pear</option>
  <option value="plum"   data-img="https://i.imgur.com/PSATOVN.jpg">Plum</option>
</select>
  
  
<div class="img-block">
          <img id="js-img"
               src="default-placeholder.jpg" 
                  name="image-swap" 
                  alt="..."
                  title="..." 
                 width="200" 
                 height="200" class="img-responsive" />
</div>
  
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(document).ready(function($){
  
  var list  = $('#js-choose');
  var image = $('#js-img').get(0);
  
  var showChosenImage = function()
  {  
    image.src = list.find(":selected").data().img;
  }
  
  // Switch the image whenever a different option is chosen.
  list.on('change', showChosenImage);
  
  // When the page first loads, 
  // switch the default image to the option that was
  // initially defined as selected.
  showChosenImage();
});
</script>
  
</body>
</html>
Sponsor our Newsletter | Privacy Policy | Terms of Service