Update Image Placeholder with Selection from List/Menu Box

as long as you've got the relative path to the image in a field (call it "img_path" for this example), you can do something like this:

<script type="text/javascript">
  function changeImg(){
    var sNewImgPath = document.getElementById('img_path').value;
    document.getElementById('my_img').src=sNewImgPath;
  }
</script>

<select name="images" onChange="changeImg();">
  <option value=1>Pic 1</option>
  <!--... other options here-->
</select>
<input type=hidden name="img_path" id="img_path" value="">
<img id="my_img" src="img1.gif" border=0>

Regards,
peh803

I obviously haven't addressed how to get the relative path of the image, because you stated that you've already got that info.  If you need help with that, please let me know.  But the main point of the previous post is that you should use javascript to alter the "src" property of the img on your page when the select box's onchange event fires.  

HTH,
peh803

peh803,

I apologize for the long delay in getting back to you.  I had some database issues I had to stop and deal with last week, and I am just now getting back to this.

I have the code on my page like you have suggested, and I have the relative path for the picture saved in a field in the database called "PhotoOverallLink".  My question is - how do I get my field value into the 'img_path' value you have in the changeImg routine?

Thanks so much for your help.

Christy

OK, I have everything as you suggested, including the following script:

<script type="text/javascript">
  function changeImg(){
    var sNewImgPath = document.getElementById('SchoolPlanLink').value;
    document.getElementById('my_img').src=sNewImgPath;
  }
</script>

The name of the field containing the relative path is SchoolPlanLink.  However nothing is happening when the selection is changed.  Do I need to reference the recordset that contains this field?  How does it know where to go look for the field?

Thanks,
Christy

Hi CCBailey!

Sorry I haven't been getting back with you on this.  

You've got a hidden field called "SchoolPlanLink" that contains the relative path to the new image, right?  If that's the case, please add this id definition to the hidden field:

<input type="hidden" ID="SchoolPlanLink" name="SchoolPlanLink" value="whatever_your_value_is">

in order for the javascript code to actually use the value, you've got to make sure the ID value is set.  If it is currently set and it's still not working, please post the code you have to write the select box, to populate the hidden input, and the javascript function you're using.

Thanks,
peh803

For debugging purposes, you might also try doing this:

<script type="text/javascript">
  function changeImg(){
    var sNewImgPath = document.getElementById('SchoolPlanLink').value;

    \\Add this line!!
    alert('sNewImgPath: '+sNewImgPath);

    document.getElementById('my_img').src=sNewImgPath;
  }
</script>

Now, whenever you change the selected value in your combo box, you will see a javascript alert message telling you what image it's trying to use.

Oh - I see what you are doing.  Actually, what I have is a little more complex.  I have the relative path to the new image in a field in the database - not a hidden field (when you said 'field', I thought you meant in the database).  I can make a hidden field for this, but I will need the value of the field to change based on the selection in the listbox, since the relative path is different for each value in the listbox.  Is this possible, or do I need to do it a different way?

Thanks for your help,
Christy

OK, I thought I had this right, but when I make a selection from the pulldown, nothing happens.  Any ideas?  Here is my code:

<%

Dim rsJSArray
Dim i
i=0
Set rsJSArray = Server.CreateObject("ADODB.Recordset")
rsJSArray.ActiveConnection = MM_connKatyRoofSurvey_STRING
rsJSArray.open = "SELECT [Table-Facility].SchoolPlanLink FROM [Table-Facility]  GROUP BY [Table-Facility].SchoolPlanLink, [Table-Facility].FacilityName, [Table-Facility].DistrictID  HAVING ((([Table-Facility].DistrictID)=555)) ORDER BY [Table-Facility].FacilityName;"
response.write "<script type=""text/javascript"">"
if not rsJSArray.eof then
  response.write "var img_paths=new Array("&rsJSArray.recordcount-1&");" & vbCrLf
end if
do while not rsJSArray.eof
 response.write "img_paths[" & i & "] = '"&rsJSArray("SchoolPlanLink")&"';" & vbCrLf
rsJSArray.moveNext
i=i+1
loop
response.write "</script>"

rsJSArray.close
set rsJSArray = nothing

%>

<script type="text/javascript">
  function changeImg(){
    var SelectedSchool = document.getElementById('lstschool').SelectedIndex
      var sNewImgPath = rsJSArray[SelectedSchool].value;
       alert('sNewImgPath: '+sNewImgPath);

      document.getElementById('my_img').src=sNewImgPath;
  }
</script>

<select name="lstSchool" id="select" onChange="changeImg();">
                <%
While (NOT rsSchools.EOF)
%>
                <option value="<%=(rsSchools.Fields.Item("FacilityID").Value)%>"><%=(rsSchools.Fields.Item("FacilityName").Value)%></option>
                <%
  rsSchools.MoveNext()
Wend
If (rsSchools.CursorType > 0) Then
  rsSchools.MoveFirst
Else
  rsSchools.Requery
End If
%>
              </select>

<img id="my_img" src="img1.gif" border=0>

Can you tell what I am missing?  I even put the "alert('sNewImgPath: '+sNewImgPath);" line in there for debugging, and still nothing happens.

Thanks for your help.
Christy

Do you see any script error messages on your page? i.e., a little yellow exclamation mark in the bottom left of the page?  

Here are some things you can try:
Change this line:
-------old-----------
var SelectedSchool = document.getElementById('lstschool').SelectedIndex
-------old-----------
-------new----------- (add case sensitive ID, lowercase s in selectedIndex, and the semi-colon at the end of the line... javascript can be really picky!)
var SelectedSchool = document.getElementById('lstSchool').selectedIndex;
-------new-----------

Now, put alerts in like this:

<script type="text/javascript">
  function changeImg(){
      alert('I am in the changeImg() function...');
      var SelectedSchool = document.getElementById('lstSchool').selectedIndex;
      alert('SelectedSchool: '+SelectedSchool);
      var sNewImgPath = rsJSArray[SelectedSchool].value;
      alert('sNewImgPath: '+sNewImgPath);
      document.getElementById('my_img').src=sNewImgPath;
  }
</script>

Let me know what you get!

also, once the page renders, go to the "View" menu on internet explorer, and then click on "Source"; this will show you the source that was rendered by the ASP compiler to your ASP page.  You should take a look at the javascript array generated by your code and see how that looks.  If anything looks fishy there, that could be a problem.  If you can, paste the javascript array declaration / population that your code generates.

Thanks,
peh803

Great - thanks for the help - I am a lot closer.  

Yes - I did have a yellow exclamation mark.  I made your suggested changes, and I still got a script error message on my page (the yellow exclamation mark. . .).  Now the error is " 'rsJSArray is undefined", and it is happening on the line:  var sNewImgPath = rsJSArray[SelectedSchool].value;.  What is going on there?  I get the first two alerts, but not the third (the 'sNewImgPath: '+sNewImgPath).

I looked at my array, and it looks good.  I only have one value entered in the database now (just something to test with), and I think it showed up in the right place.  Here it is:

<script type="text/javascript">var img_paths=new Array(-2);

img_paths[0] = '';

img_paths[1] = '';

img_paths[2] = '';

img_paths[3] = '';

img_paths[4] = '';

img_paths[5] = '';

img_paths[6] = '';

img_paths[7] = '';

img_paths[8] = '';

img_paths[9] = '';

img_paths[10] = '';

img_paths[11] = '';

img_paths[12] = '';

img_paths[13] = '';

img_paths[14] = '';

img_paths[15] = '';

img_paths[16] = '';

img_paths[17] = '';

img_paths[18] = '';

img_paths[19] = '';

img_paths[20] = '';

img_paths[21] = '';

img_paths[22] = '';

img_paths[23] = '';

img_paths[24] = '';

img_paths[25] = '';

img_paths[26] = '';

img_paths[27] = '';

img_paths[28] = '';

img_paths[29] = '';

img_paths[30] = '';

img_paths[31] = '';

img_paths[32] = '';

img_paths[33] = '';

img_paths[34] = '';

img_paths[35] = '';

img_paths[36] = '';

img_paths[37] = '';

img_paths[38] = '';

img_paths[39] = '';

img_paths[40] = '';

img_paths[41] = '';

img_paths[42] = '';

img_paths[43] = '';

img_paths[44] = '';

img_paths[45] = '../Images/1-Elementary/Alexander_ES/JPG/Overall_Section/Alex.jpg';

img_paths[46] = '';

img_paths[47] = '';

img_paths[48] = '';

img_paths[49] = '';

img_paths[50] = '';

img_paths[51] = '';

img_paths[52] = '';

img_paths[53] = '';

</script>

Thanks so much for all your help - I'm getting really close.
Christy

oops, this line:
--old---
var sNewImgPath = rsJSArray[SelectedSchool].value;
--old---
should be this:
--new---
var sNewImgPath = img_paths[SelectedSchool].value;
--new---

Right?  :)

The problem was that we got confused and were using our ASP array in a javascript call!  oops!

Also, I just noticed that this is a problem:

if not rsJSArray.eof then
  response.write "var img_paths=new Array("&rsJSArray.recordcount-1&");" & vbCrLf
end if

The problem is that your recordset's recordcount is returning -1, a common problem with recordsets.  You'll have to get the count of your items a different way (which would be a pain) ... OR, you could just declare the array with more than enough items available in it. i.e., something like this:

if not rsJSArray.eof then
  response.write "var img_paths=new Array(200);" & vbCrLf
end if

This is what I would recommend, just to get it working.  If you want to come back later and add specific array dimensioning, you can do that...

Regards,
peh803

OK, I did what you suggested (I was confused about calling the array - thanks for clearing that up).  Now, I get my 3 alerts, and it shows the SelectedSchool as 45 (as it should), but the value of sNewImgPath is 'undefined'.  Why would that be - looking at my array, the value at 45 is correct?!?

Thanks,
Christy

Let me see the js function in its current state?

thanks!~
peh803

<script type="text/javascript">
  function changeImg(){
    alert('I am in the changeImg() function...');
      var SelectedSchool = document.getElementById('lstSchool').selectedIndex;
      alert('SelectedSchool: '+SelectedSchool);
      var sNewImgPath = img_paths[SelectedSchool].value;
       alert('sNewImgPath: '+sNewImgPath);
      document.getElementById('my_img').src=sNewImgPath;
  }
</script>

ah yes, sorry, I should have caught this earlier.  there is no "value" property for javascript arrays.  So, do this:

-------old-------
var sNewImgPath = img_paths[SelectedSchool].value;
-------old-------
-------New-------
var sNewImgPath = img_paths[SelectedSchool];
-------New-------

Let me know how this helps!
Thanks,
peh803

Beautiful!  Thanks so much for your help!!

Christy

so does it work then? :-)

I'll take the acceptance as a yes :)

Glad to help you through this process.  Hopefully you also learned some pretty cool javascript tricks along the way!

Debugging javascript can be a real pain in the ***, so I typically use alerts as we did for this example.  I hope this knowledge serves you well in the future.

Regards,
peh803

It does work - perfectly.  I almost posted because when I tried it the first time, I got the correct path in the alert, but the picture still didn't change.  But then I realized that I hadn't actually uploaded the picture.  Once I did that, it worked like a charm!  Thanks again for all your help.

Christy

Again, glad I could help out!

Good luck with the project.

peh803