Drop down list

[dianazheng]

Hi all,

i have a code that goes like this, the problem with this is that, i am not sure why it does not display the image when i click on the drop down list.

code
=============
<SCRIPT LANGUAGE = "javascript">
<!--

//task 3.1
function showImage(){
if(!document.images){
return(document.images.pictures.src = document.productForm.prduct.options[document.productForm.prduct.selectedIndex].value)
}
}
-->
</SCRIPT>

<table border="2" width="300" height="425">
<tr>
<td>
<form name="productForm"><p align="center">
<select name="prduct" onChange="showImage()">
<option selected value="">Select Product</option>
<option value="affection.jpg">Red Roses</option>
<option value="mix.jpg">Mix Surprise</option>
<option value="hugo.jpg">Hugo Mens</option>
<option value="kenzo.jpg">Kenzo Ladies</option>
<option value="sweetlove.jpg">Sweet Love</option>
</select></p>
</form>
</td>
<td>
<img src="main.jpg" name="pictures" width="300" height="200">
</td>
</tr>
</table>
=============
code end


Thanks in advance
diana

[PallaviDalvi]

Didnt see any document.images in the code u posted. moreover when u work with javascript ...u access elements with their ids...none of the elements have ids... so ur javascript wudnt work. or u use document.all.item("element_name")

the best approach in ur case wud have been to execute the code and see the errors given by IE. they are self explanatory and wud help u to correct ur code one by one.

[cmiskow]

if(!document.images){
return(document.images.pictures.src = document.productForm.prduct.options[document.productForm.prduct.selectedIndex].value)
}



Is it just me or are you only performing the image swap on the condition that the document.images collection does not exist?

[dianazheng]

i have that working, the problem is that i didn't place the order correctly.

Thanks all..




Now i am having another problem with the drop down list.
My problem is that, when i select any of the option in a drop down list, i need to display three different type of infromations about that particular selected option.

For example, when i select red roses in the drop down list, it should display beside the drop down list:

Affection in one row
image of Affection in second row
desciption of Affection in third row

This is what i have done, i am just trying to display a word relevant to a option in a text box

Thanks in advance.


products = new Array("None Selected", "Affection", "Mix Surprise", "Hugo Mens", "Kenzo Ladies", "Sweet Love")
function showImage(myform){
document.showContent.value = ""

var itemSelect = myForm.pro.selectedIndex
document.showContent.content.value = products[itemSelect]

}

<! table for displaying product and discription>
<form name="productMenu">
<select name="pro" onChange="showImage(productMenu)">
<option>Select Product</option>
<option>Red Roses</option>
<option>Mix Surprise</option>
<option>Hugo Mens</option>
<option>Kenzo Ladies</option>
<option>Sweet Love</option>
</select>
</form>

<form name="showContent">
<input type="text" name="content" size="40">
</form>

[PallaviDalvi]

seems like u forgot to mention ur problem(as in what part u want help! :) )
just a tip however...u do not need multiple forms to acheive what u are trying. multiple forms are used when u need to post certain controls to one location and certain others to another...or u want to post certain controls at one point of time and certain others at another....among other cases.

[dianazheng]

oops, my problem is that now i can't even display "Affection", "Mix Surprise", "Hugo Mens"... in the array

[PallaviDalvi]

cudnt really understand ur prob...u cant display items in the array, meaning???
however... there is a typo(which the browser wud have pointed out to u...but never-the-less.)

function showImage(myform){
var itemSelect = myForm.pro.selectedIndex

[dianazheng]

Sorry i didn't meant to be rude or anything, i just want to make sure you understand what i wanted.

Did you understand what i wanted my result to be like???

Did you know what my code was trying to do??

PallaviDalvi can you help me with my problem??

[PallaviDalvi]

if ur prob is just that the code doesnt work like u explained...then thats not a prob at all... coz when u rectify the typo pointed out by me(which wud also be pointed out by IE.)... the value of the array is displayed in the textbox based on the value selected in the drop down. hope this solves ur prob.... if not, feel free to get back... with a bit more explanation(u see, i have a slow grasping power)

[dianazheng]

If i have change the typo that you have pointed out just now, then when i click on "Red Roses', it will show "Affection" in the text box.

Am i right.

[PallaviDalvi]

yup!and from ur code i gather this is what u want to happen.... if not let me know what shud be happening instead.

[dianazheng]

Ya i am right, i got that display out when i click on any of the options.

ok, now my problem is, do you have any ideas that when i click any of the "Red Roses" option, i want it to display the word "Affection" follow by "an image" then "description of image", all in a col


so my out put will be something like this, when i view them in IE.
This will be put in a table, look somethings like this

=========================
======= |
|Affection| |
======= |
======== ======= |
|Red Roses| | Image | |
======== ======= |
========== |
|Descriptions| |
========== |
=========================
//but i couldn't get this to display nicly
Pls give me some ideas.


This is what i have in my code now


products = new Array("None Selected", "Affection", "Mix Surprise", "Hugo Mens", "Kenzo Ladies", "Sweet Love")
function showImage(myform){
document.showContent.value = ""

var itemSelect = myform.pro.selectedIndex
document.showContent.content.value = products[itemSelect]

}

<form name="productMenu">
<select name="pro" onChange="showImage(productMenu)">
<option>Select Product</option>
<option>Red Roses</option>
<option>Mix Surprise</option>
<option>Hugo Mens</option>
<option>Kenzo Ladies</option>
<option>Sweet Love</option>
</select>
</form>

<form name="showContent">
<input type="text" name="content" size="40">
</form>

[PallaviDalvi]

here goes.
the html part

<table width=100% cellspacing=0 border=0>
<tr>
<td>
<form name="productMenu">
<select name="pro" onChange="showImage(productMenu);">
<option>Select Product</option>
<option>Red Roses</option>
<option>Mix Surprise</option>
<option>Hugo Mens</option>
<option>Kenzo Ladies</option>
<option>Sweet Love</option>
</select>
</form>
</td>
<td>
<form name="showContent">
<input type="text" name="content" readonly size="40"><br>
<img src="" name=img_file><br>
<input type=textarea name=desc readonly >
</form>
</td>
</tr>
</table>

i think u need the forms for some reason later... so i have also included them...although i dont see any use of having 2 forms or forms altogether.
the javascript part

<script language=javascript>
<!--
products = new Array("None Selected", "Affection", "Mix Surprise", "Hugo Mens", "Kenzo Ladies", "Sweet Love");
function showImage(myform)
{
document.showContent.value = "";

var itemSelect = myform.pro.selectedIndex;
document.showContent.content.value = products[itemSelect];

//assuming that the image file names are stored in an array named images.
document.showContent.img_file.src=images[itemSelect];

//assuming that the descriptions are stored in an array named desc.
document.showContent.desc.value=desc[itemSelect];
}
-->
</script>

this help???

[dianazheng]

yap yap, this is the format of the layout that i wanted. thanks.

but how can i link the options to the three rows at the left.
for eg, when i click on the "red roses" on the options, all three "Name" "Image" "description " must show out at the same time.

you get what i means??

[PallaviDalvi]

the code i posted does just that. simply create and populate the arrays for image file names and description. it works like u want it to.

[dianazheng]

Ah, i don't get what you mean.

What you mean by populate the array??

Where should i add other "image" and "description" that will show together when i click on the selected options??

If you are saying this, then this is not what i wanted.


<table width=100% cellspacing=0 border=0>
<tr>
<td>
<form name="productMenu">
<select name="pro" onChange="showImage(productMenu);">
<option>Select Product</option>
<option>Red Roses</option>
<option>Mix Surprise</option>
<option>Hugo Mens</option>
<option>Kenzo Ladies</option>
<option>Sweet Love</option>
</select>
</form>
</td>
<td>
<form name="showContent">
<input type="text" value="Red Roses" name="content" readonly size="40"><br>
<input type="text" value="Red Roses" name="content" readonly size="40"><br>

<img src="affection.jpg" name=img_file><br>
<img src="sweetsurprise.jpg" name=img_file1><br>
<input type="textarea" value="dsfdsfsd" name="desc" readonly >
<input type="textarea" value="dsfdsfsd" name="desc" readonly >
</form>
</td>
</tr>
</table>

[PallaviDalvi]

just like u created

products = new Array("None Selected", "Affection", "Mix Surprise", "Hugo Mens", "Kenzo Ladies", "Sweet Love");

create images array and desc array. for eg.

images= new Array("none.jpg", "Affection.jpg", "Mix Surprise.jpg"....);
desc= new Array("no desc", "desc for affection", "description for Mix Surprise"....);

now just like the values from products array are picked up and displayed in the textbox...similarly the values of all other arrays will be picked up and displayed in the respective controls. hope i make my self clear.

[dianazheng]

what about the function



function showImage(myform)
{
document.showContent.value = "";

var itemSelect = myform.pro.selectedIndex;
document.showContent.content.value = products[itemSelect];

//assuming that the image file names are stored in an array named images.
document.showContent.img_file.src=images[itemSelect];

//assuming that the descriptions are stored in an array named desc.
document.showContent.desc.value=desc[itemSelect];
}



I was trying out on what you say just now.

[PallaviDalvi]

well if u see, the function already reads the values from the 3 arrays---products, images and desc. so u do not have to make any change to it! all u need to do is create the 2 arrays that are not yet created. see to it that the names of image files u give are valid and.... bingo!

[dianazheng]

yeah, i got it.... Really thanks for your help...

but i was thinking, can i just display the "name" and "desp" on the IE itself without using the textbox?

[PallaviDalvi]

yes...u can do it like this

td1.insertAdjacentText("beforeEnd","hello");

where td1 is the id of the <td> where u want to display the text. and "hello" is the text u want to be displayed! but in this case u have to careful to set the <td> contents to blank on every selection...or else the text,image and desc values for all ur selections will be displayed in the <td> at the same time. i personally prefer displaying in textboxes... that involves less of programming efforts. :D

PS: Programming is not all that tough if u have a logical bent of mind! ;)

[dianazheng]

Ah, how can you set the "id" for the <td>, i never come accross this in javascript??

Because my "desp" is sort of like long, maybe i can use <textarea> instead.

Ya, but sometime you just can't come out with the logical, that why programming is hard in that sense

[PallaviDalvi]

id can be set as
<td id=td1 name=td1>

[dianazheng]

I still don't understand how to do the <td id> thing.

But i was thinking, can i put a default image in the "image" and both the "name" and "desc" blank.

[PallaviDalvi]

in the img tag give the src of the default image. the other 2 will be blank by default...since thats the default behaviour of textboxes and textareas.

[dianazheng]

Yeah i got it all done, really Thanks for your time and help PallaviDalvi .

[dianazheng]

Hi PallaviDalvi,
Can i know what other language do you know beside javascript?

Or do you know c programming as well.