ONCHANGE event handler

[Arrtu]

This is a script which I use on my site:

<form name="formindex">
<select name="options" size="1" onChange="showtext()" >
<option value="select" readonly>---select---</option>
<option value="opt1">Option1</option>
<option value="opt2">Option2</option>
<option value="opt3">Option3</option>
<option value="opt4">Option4</option>
</select>

<textarea rows=1 cols=25 wrap="physical" name="textarea"></textarea>

<script language="javascript">

var show=document.formindex

var textarea=new Array()

textarea[0]="---"
textarea[1]="Option1"
textarea[2]="Option2"
textarea[3]="Option3"
textarea[4]="Option4"

function showtext(){
show.textarea.value=textarea[show.options.selectedIndex];
}
</script>


Its not THE actual script I use, but greatly condensed so that you have a rough idea of what I am doing. It works, and it is my first script. The reason I used this method to manipulate text area from selection is that I need four different text boxes to display different information depending on the option selected from the form (not shown here) so I have 4 different textbox variables which all pass a different value into each box.

What I need help with is passing a fifth value onto the page. I not only want the four text boxes populated, but I also want to display an image on the same page in either a fifth field on my form, or in a cell within the table that houses my form, and I presume it is something to do with ONCHANGE. Can anyone tell me how to do it?

[Pittimann]

Hi!

What action taken by the user should make your fifth value (image or text) appear on the page - is it another <select>, pressing a button, or what?

Cheers - Pit

[Arrtu]

As I said, This is my first script and I am learning as I go along by reading here, referring to the javscript bible and various other java books I have picked up, so perhaps explaining what I am trying is difficult, so I will try to clarify and provide a link to my current working script.

Just now, I have a table with six fields in it. The table consists of 5 columns and 2 rows.

It looks like this:

(Option menu) :(textbox1):(textbox2):(textbox3):(textbox4)

<------------------------:(textbox5):--------------------------->

By selecting text from the option menu, a text value is displayed in each of the five textboxes.

What I am wanting to do is put in another cell at the end of textbox4 spanning both rows which will display an image corresponding to the text selected from the option menu.

To explain, I play an online game and I created this guide providing information on each adversary encountered throughout the game. So not only do I want to list a name in the option menu, but provide text based information in each of the five fields, and dislpay an image (gif) of it in a seperate area.

View it here (www.rawpower-guild.org/info/mobfinder.htm)

btw, I know that the large textbox in the bottom has some undefined variables, it is work in progress.

[Pittimann]

Hi!

I added some small stuff. Inside your table (the <tr> with the big textarea):

<TR><TD COLSPAN=5><CENTER><textarea rows=6 cols=60 wrap="physical" name="describe" readonly>Please select from the mob viewer</textarea><br><img src="dummy.gif" name="mobindexImg" border=0></TD></TR>

and at the end of your script:

var whichImg=new Array()
whichImg[0]="0.gif";
whichImg[1]="1.gif";
whichImg[2]="2.gif";
// more images have to follow!!!
function showtext(){
moblevel.tame.value=tame[moblevel.mobfind.selectedIndex];
moblevel.repulse.value=repulse[moblevel.mobfind.selectedIndex];
moblevel.trap.value=trap[moblevel.mobfind.selectedIndex];
moblevel.dash.value=dash[moblevel.mobfind.selectedIndex];
moblevel.describe.value=description[moblevel.mobfind.selectedIndex];
document.mobindexImg.src=whichImg[moblevel.mobfind.selectedIndex];
}

If you replace the "0.gif" etc. with path + filenames of your images, something like you desire will happen. You should consider adding a preload of the images...

Cheers - Pit

[Arrtu]

Excellent! Thank you very much for this, and for the prompt reply. Much appreciated.

[Pittimann]

Hi!

You're very welcome!

Wasn't really sure, if this was what you wanted... :p

Cheers - Pit