Hi All,

I was wondering if anyone could help me with this one.

If you want to see what I have at the moment goto http://www.personally-yours.co.uk/indev/test/state_dropdown.php

This page has two drop downs, the bottom one is populated depending on what is selected in the top one.

What I want to do is have the appropriate image displayed when something is selected in the second drop down. So for example if 15mm x 15mm Badge (P-10) is selected I want the image of the product to be displayed.

All the image paths are stored in the database using the field name 'imgurl'.

The code I have at the moment is as follows:

state_dropdown.php - Displays the information.

     echo "<form name=sel>\n";
     echo "Choose Gift Type : <font id=gift><select>\n";
     echo "<option value='0'>============</option> \n" ;
     echo "</select></font>\n";
     echo "Choose Your Gift : <font id=gifttype><select>\n";
     echo "<option value='0'>=== none ===</option> \n" ;
     echo "</select></font>\n";

<script language=Javascript>
function Inint_AJAX() {
   try { return new ActiveXObject("Msxml2.XMLHTTP");  } catch(e) {} //IE
   try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
   try { return new XMLHttpRequest();          } catch(e) {} //Native Javascript
   alert("XMLHttpRequest not supported");
   return null;

function dochange(src, val) {
     var req = Inint_AJAX();
     req.onreadystatechange = function () { 
          if (req.readyState==4) {
               if (req.status==200) {
                    document.getElementById(src).innerHTML=req.responseText; //retuen value
     req.open("GET", "state.php?data="+src+"&val="+val); //make connection
     req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
     req.send(null); //send value

window.onLoad=dochange('gift', -1);         // value in first dropdown

state.php - behind the scenes processing.

     //set IE read from page only not read from cache
     header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
     header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
     header ("Cache-Control: no-cache, must-revalidate");
     header ("Pragma: no-cache");
     header("content-type: application/x-javascript; charset=tis-620");
     //set database
$dbhost = "*********";
$dbuser = "*********";
$dbpass = "*******";
$dbname    = "*******";
mysql_pconnect($dbhost,$dbuser,$dbpass) or die ("Unable to connect to MySQL server");  
     if ($data=='gift') {  // first dropdown
          echo "<select name='gift' onChange=\"dochange('gifttype', this.value)\">\n";
          echo "<option value='0'>==== choose gift type ====</option>\n";
          $result=mysql_db_query($dbname,"select `gift_id`, `gift_type` from gifttest order by `gift_type`");
          while(list($id, $name)=mysql_fetch_array($result)){
               echo "<option value=\"$id\" >$name</option> \n" ;
     } else if ($data=='gifttype') { // second dropdown
          echo "<select name='gifttype'>\n";
          echo "<option value='0'>====choose your gift ====</option>\n";                           
          $result=mysql_db_query($dbname,"SELECT `gift_id`, `desc` FROM giftdesc WHERE `gift_id` = '$val' ORDER BY `desc` ");
          while(list($id, $name)=mysql_fetch_array($result)){       
               echo "<option value=\"$id\" >$name</option> \n" ;
     echo "</select>\n<br><br>";

Any help on this would be great, thanks for looking. I'm a relative newbie to this so any help would be grateful :D


Seems the image src is wrong.
The image scr should be "../images/createyourown/badges/+[Badges;15mm x 15mm (P-10)]15mmx15mmBadge(P-10).png"

The below <img> will display the correct image.
<img alt="15mm x 15mm Badge (P-10)" src="../images/createyourown/badges/+[Badges;15mm x 15mm (P-10)]15mmx15mmBadge(P-10).png"/>