<select> browser problem

[AtomicPenguin]

Hi there.

I have a sneeky little javascript problem for you guys. The following scrap of code does different things in Explorer 6 and Netscape 6.


chosenOne = document.forms[0].city;
city = chosenOne.options[chosenOne.selectedIndex].name;


The code is located in a function which runs on an 'onchange' event handler. What it's trying to do is read the (new) value of the <Select> tag named 'city'. In explorer there's no problem, but Netscape refuses to read it.

Any idea?

[Flawless_koder]

Well surely you're not wanting the name property then?

Perhaps the value ( or the innerHTML if that differs )

Just a thought...

Flawless

[AtomicPenguin]

Oh, sorry. I meant name.

[Flawless_koder]

Ok - and the name for each of the options is set?

( silly question - but you never know )

Flawless

[AtomicPenguin]

Yes. [For a panic-ed moment, I had to go check!]

[Flawless_koder]

Have you tried setting the classes of the options and
alerting the object.className instead ?

Flawless

[AtomicPenguin]

Hmmm... what do you mean? Do you mean giving each <option> a class attribute?

[Flawless_koder]

Yes - i do.

Different attribute - different handling.

Flawless

[AtomicPenguin]

Something like this?

otherMethod = document.form[0].cities;
alert(otherMethod);


(where 'cities' is the class name given to all options)

the alert() just returns an 'undefined'.

[Flawless_koder]

other = document.forms[0].city;
alert(other.options[other.selectedIndex].className);

Flawless

[AtomicPenguin]

No luck, I'm afraid. Actually, using that code I can't even get Explorer to alert() the name, let alone Netscape. I've probably typed something wrong.

[Flawless_koder]

show me ... url?

Flawless

[AtomicPenguin]

Sure, thx! But could I email it to you, or something? It's
running on my server, and it's not terribly secure...! I don't fancy telling anyone my IP.

[Flawless_koder]

gbjk@thermeoneurope.com

Flawless

[AtomicPenguin]

Actually, I just sent you a private message!

[Flawless_koder]

Ok - the line:

document.properties.area.options[document.properties.area.options.length]

Might be a problem.

Try doing this - in a function somewhere - once the page has been loaded ( maybe in the initiate )

alert('Form: '+document.properties);

That will tell you if you have a handle on the object.

if SO - then next try alerting document.properties.area

if NOT then try using a new refernece handler:

function de(e){ return document.getElementById(e); }

and instead:

alert('Form: '+de('properties'));

BUT - you have to set the id for all the elements you reference ( that's just good practice anyway )
so the form properties and the selects should have their ids set the same as their names.

I've got a sneaking suspicion that properties is a reserved
word ( that would make sense ) and this will let us know that.

Flawless

[AtomicPenguin]

I'm pretty sure the problem isn't there, though. I've identified where the problem lies (or where the problems BEGIN, I suppose...) and it's on line 66, right after I initialize the variable 'city'. The problem seems to be in these two lines, since if I do an alert(city) at that spot, (and in the corresponding spot in the update_area() function), Explorer happily tells me the city name, whereas Netscape gives me an 'undefined'.

[Flawless_koder]

I wasn't identifying a problem location - i was debugging the script.

When the page loads the area select box is empty in Netscape.

I wanted to know if the handle to it is right or not.

You can't start at the end of the line and work up.
The first thing to check is that the methods you're
using can get to the objects ... I'm not sure for definate
that they can - so where the problem starts is irrelevant,
the debugging method goes down the same road.

There's no point in testing the value if you're not absolutely definate you've got a reference to the right
object.

Flawless

[AtomicPenguin]

Ah! Thanks! let me have another look at your previous comments...

[AtomicPenguin]

Okay. Here's the stats:

the line:
alert('Form: '+document.properties);
yields "Form: [object]"

as does the other two:
alert(document.properties.area);
alert('Form (with de() function): '+de('properties'));

I confess I'm feeling increasingly ignorant about all this... does the [object] mean that it's FOUND it? Or that it doesn't know what it is?

[Flawless_koder]

Object means it's got a reference to a handle pointer to a
namespace.
ie: it's got it.

I'm gonna put look at your page again in netscape and suggest some more debugging tests.

You can take those alerts out.

Thanks

Flawless

[Flawless_koder]

function initialize() {

   properties.price.focus();

	 initiallySelectedOne = document.forms[0].city;
	 city = initiallySelectedOne.options[initiallySelectedOne.selectedIndex].name;

So here - it's not getting the handle properly.

1) put alert(initiallySelectedOne) in there after initiallySelectedOne.

2) alert(initiallySelectedOne.options) after that.

3) Try: alert(initiallySelectedOne.Options) since i think the options property *could* be case sensitive.

Flawless

[AtomicPenguin]

We get 'Object','Object','undefined' in that order. Any help?

[Flawless_koder]

Yes.

That means that you've got the objects properly... except the last one - which is a good thing. ( except i thought the second would be Object Collection )

Ok - so a few more alerts for you ( to replace the last ones )

1) alert(initiallySelectedOne.selectedIndex)
that should yield a number

2) alert(initiallySelectedOne.options[initiallySelectedOne.selectedIndex])

3) alert(initiallySelectedOne.options[initiallySelectedOne.selectedIndex].name)

The last one should be the problem.

Flawless

[AtomicPenguin]

This is interesting. On Explorer, we got: 13, [Object], Surrey. But Netscape didn't do diddly squat. I tried refreshing countless times & emptying the cache, but I got no alerts...

Any ideas?