Help! Why can't I use image buttons with this piece of JavaSript?

Factual Questions
1

OK. I want to use a drop-down navigation menu with an image button. Knowing nothing about javascript, I grab the following code from a code engine:

Now then, I try to replace the button with a tag to create an image button, that I found somewhere else. Here it is: <input type = “image” src = “…/rnav.jpg” onClick=“jump(this.form)”>

And it doesn’t work! I have no idea why. (I’m basically a Chinese box when it comes to anything like this. Would someone please tell me why it doesn’t like the image button and how I should fix it?

2

Javascript is not my expertise, but I think I may see the problem: the “loc” variable in the land function has no context and should be changed to “ref”. You’re passing the “loc” variable from the jump function into the land function as a variable named “ref”.

Hope this helps!

3

Basically, image buttons are roughly equivalent to Submit buttons. Clicking on the image will try to submit the form that contains it.

I’d replace it with just an image. You can either capture the onclick event in the image tag itself, or wrap the whole thing in a javascript link:



<img src = "../rnav.jpg" onclick="jump(this.form)">

or



<a href="javascript:jump(this.form)"><img src="../rnav.jpg"></a>

(Note the space in “javascript” above has been added by the board for security reasons. Take it out if you use the code.)

I have a feeling you may need to supply a name attribute to the form tag and then instead of using “this.form” in the event code use something more like “document.formname”.

Hope this helps.

4

I implemented all of these things, in series and parallel, and none of them worked. With the button, though, they worked just the same as the listed code. :frowning: I don’t get it.

5

Right – the image button is equivalent to “Submit”, not to a generic button. However, you can still make such a button follow an event handler instead (in this case, “onClick”), but in some of the event handlers, you need to override the default action of the button.

The default action of this button is to attempt to submit the form – which is to run a program called “dummy” (obviously, there is no such program in this case – the intent is to run the event handler instead).

The “onClick” event handler allows you to override the default action of the button by doing a “return false”. Change this:


onClick="jump(this.form)"

to this:


onClick="jump(this.form); return false"

I tried it on a page of my own, and it tried to go to the appropriate URL, instead of going to “dummy” (which is the form submit action). So, it worked for me.

6

Monstre…way to go…a simple return statement!

Can you explain why the scoping problem I surmised in my reply above is not actually a problem? How is the land function getting the (correct) value of loc (in the original script) when it seems it should be out of scope?

Thanks!

7

Monstre…way to go…a simple return statement!

By the way, I tried this out on Netscape, and it appears that Netscape (at least v. 4.7) doesn’t like it, still. Although the “return false” from the onClick is correct and part of the specifications in Javascript, I believe.

On that note, there isn’t much rhyme or reason or consistency to the “return” values from the event handlers. Some event handlers have a value you can return to do something (like in this case), and some don’t. onClick just happens to be one of the more common ones people use, so this one is good to know.

Well, I’d start by saying that it looks like pretty poor coding to me. I tested a few things out, and it appears that if you simply create a variable (without declaring it with “var”), it is global. This would explain why the scope issue is not a problem.

Now, in that “jump” function, try starting out the “loc” variable with a proper declaration:


var loc;

Then, you should get an error from the “land” function, since “loc” would be considered a local variable of “jump” only. (I got a script error when I tried this).

However, as it is, this variable was simply used without a declaration – and I didn’t realize this before, but it looks like this creates it automatically as a global variable. I tested this out by throwing some alert statements in the functions to print out the values of the variables (in pop-up boxes) during the processing of the functions. You could try this too. Example:

alert('loc = ’ + loc);
alert('ref = ’ + ref);

So, if “loc” is global, then there really was no need for the first parameter on the “land” function (the parameter “ref” – which is never actually used in the function). So regardless of the intent, it’s still poor and understandably confusing coding.

So, where did you find that code, matt?

8

EchoEcho.Com Tools - Tools .

Anyway: YES! It now works, with this code:

I hope it works on other people’s machines :slight_smile:

9

Figures…I never had any luck with Netscape until 6.x. In any case, Matt, I checked it out on IE6 on XP Pro, Mozilla 1.01 and Opera 6.1 (both on Linux) and it seems to be OK, if that’s any help.

A-ha…contrary to my every instinct as a C/C++ programmer :smiley:

Thanks for the info!

10

The code as I’ve quoted it in the OP?

11

Yes, mine too! But since Javascript is a very loosely-typed interpreted language, it makes sense that this type of thing is allowed. Happens in some other web page languages too, like the server side scripting language, PHP. To create variables, you just start using them (no declarations).

I hadn’t realized until now that Javascript would allow creating variables like this, though – the normal way is to use “var” to create one, so I hadn’t ever bothered to try otherwise.

12

With this code:



<form action="dummy" name="noodle" method="post"><select name="choice" size="1">
<option value="">Select an auxiliary installation</option><option value="stcharles/index.html">St. Charles</option><option value="youville/index.html">Youville</option></select><input
type="image" src="../apache_pb.gif" onClick="jump(document.noodle); return false;"></form>

i.e., with the addition of Monstre’s return statement.

The jump and land functions are as in the OP.

13

Oops, sorry I hosed the thread format…hit submit instead of preview! :o

I AM a newbie, after all! :smiley:

14

*Oops, sorry I hosed the thread format…hit submit instead of preview!

I AM a newbie, after all! *



Newbie::~Newbie()
{
   delete ptr2void;
}

:smiley: