Changing image from DropDown List create from MySQL table


#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