/    Sign up×
Community /Pin to ProfileBookmark

ONCHANGE event handler

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?

to post a comment
JavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@PittimannDec 12.2003 — 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
Copy linkTweet thisAlerts:
@ArrtuauthorDec 12.2003 — 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.

[url=www.rawpower-guild.org/info/mobfinder.htm]View it here[/url]

btw, I know that the large textbox in the bottom has some undefined variables, it is work in progress.
Copy linkTweet thisAlerts:
@PittimannDec 12.2003 — 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>[COLOR=limegreen]<br><img src="dummy.gif" name="mobindexImg" border=0>[/COLOR]</TD></TR>

and at the end of your script:
[code=php]
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];
}
[/code]

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
Copy linkTweet thisAlerts:
@ArrtuauthorDec 12.2003 — Excellent! Thank you very much for this, and for the prompt reply. Much appreciated.
Copy linkTweet thisAlerts:
@PittimannDec 12.2003 — Hi!

You're very welcome!

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

Cheers - Pit
×

Success!

Help @Arrtu spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...