Help solving select list javascript error

[John]

Hi,

I have the following code:

<FORM>
<font size="3">Brands </font><br />
<SELECT SIZE="1" NAME="categoryl ist" STYLE="font-size: 8pt">
<OPTION VALUE=http://my.domain,.com/cetegory1.html selected>Catego ry
1</OPTION>
<OPTION VALUE=http://my.domain,.com/cetegory2.html> Category
2</OPTION>
<OPTION VALUE=http://my.domain,.com/cetegory3.html> Category
3</OPTION>
</SELECT>
<a href="javascrip t:;"
onclick="goto_C ategoryURL(this .form.categoryl ist)"><img border="0"
src="../images/mybutton.gif" align="absbotto m"></a>
</FORM>

When I click on the button, I am expecting to go to the URL of the currently
selected item in the select list. Instead, I am getting the following
script error:

"Error: this.form has no properties"

How can I make this code work please?

Thanks,
Don

[RobB]

John wrote:

Hi,

I have the following code:

<FORM>
<font size="3">Brands </font><br />
<SELECT SIZE="1" NAME="categoryl ist" STYLE="font-size: 8pt">
<OPTION VALUE=http://my.domain,.com/cetegory1.html selected>Catego ry 1</OPTION>
<OPTION VALUE=http://my.domain,.com/cetegory2.html> Category
2</OPTION>
<OPTION VALUE=http://my.domain,.com/cetegory3.html> Category
3</OPTION>
</SELECT>
<a href="javascrip t:;"
onclick="goto_C ategoryURL(this .form.categoryl ist)"><img border="0"
src="../images/mybutton.gif" align="absbotto m"></a>
</FORM>

When I click on the button, I am expecting to go to the URL of the currently selected item in the select list. Instead, I am getting the following script error:

"Error: this.form has no properties"

How can I make this code work please?

Thanks,
Don

Were you calling that function from an event handler property of a form
element (Button.onclick , e.g.), 'this' would reference the element
object, and, as all form elements expose a .form property - to allow
easy referencing of the containing Form object - this.form.categ orylist
would point to the select (this.form.elem ents.categoryli st is more
precise). Since you're calling it from a link, however - a link isn't a
form element, no matter where you embed it - this' references the Link
object, and Link objects have no .form property.
Use an suitable absolute reference:

<a...onclick="g oto_CategoryURL (document.forms[0].elements.categ orylist)">

....or name the form & use that, or use an id with
..document.getE lementById, or
document.getEle mentsByTagName( 'form').item(0) , or...

R. C. will now correct me. #:=o

[Randy Webb]

John wrote:

Hi,

I have the following code:

<FORM>
<font size="3">Brands </font><br />
<SELECT SIZE="1" NAME="categoryl ist" STYLE="font-size: 8pt">
<OPTION VALUE=http://my.domain,.com/cetegory1.html selected>Catego ry
1</OPTION>
<OPTION VALUE=http://my.domain,.com/cetegory2.html> Category
2</OPTION>
<OPTION VALUE=http://my.domain,.com/cetegory3.html> Category
3</OPTION>
</SELECT>
<a href="javascrip t:;"
onclick="goto_C ategoryURL(this .form.categoryl ist)"><img border="0"
src="../images/mybutton.gif" align="absbotto m"></a>
</FORM>

When I click on the button, I am expecting to go to the URL of the currently
selected item in the select list. Instead, I am getting the following
script error:

"Error: this.form has no properties"

How can I make this code work please?

Stop referring to "this.form" when the link has no form property for
this.form to resolve to. If you are dead set on making your page JS
dependent, then use a proper reference to the form:

First, where is goto_CategoryUR L() defined?

<form name="myForm" action="myForm. php">

<button onclick="goto_C ategoryURL('doc ument.myForm.ca tegorylist')">
Click me, in JS enabled browsers, to go to a URL
</button>

And then validate your HTML.

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly

[Randy Webb]

RobB wrote:

John wrote:

Hi,

I have the following code:

<FORM>
<font size="3">Brands </font><br />
<SELECT SIZE="1" NAME="categoryl ist" STYLE="font-size: 8pt">
<OPTION VALUE=http://my.domain,.com/cetegory1.html

selected>Catego ry

1</OPTION>
<OPTION VALUE=http://my.domain,.com/cetegory2.html> Category
2</OPTION>
<OPTION VALUE=http://my.domain,.com/cetegory3.html> Category
3</OPTION>
</SELECT>
<a href="javascrip t:;"
onclick="goto _CategoryURL(th is.form.categor ylist)"><img border="0"
src="../images/mybutton.gif" align="absbotto m"></a>
</FORM>

When I click on the button, I am expecting to go to the URL of the

currently

selected item in the select list. Instead, I am getting the

following

script error:

"Error: this.form has no properties"

How can I make this code work please?

Thanks,
Don

Were you calling that function from an event handler property of a form
element (Button.onclick , e.g.), 'this' would reference the element
object, and, as all form elements expose a .form property - to allow
easy referencing of the containing Form object - this.form.categ orylist
would point to the select (this.form.elem ents.categoryli st is more
precise). Since you're calling it from a link, however - a link isn't a
form element, no matter where you embed it - this' references the Link
object, and Link objects have no .form property.
Use an suitable absolute reference:

<a...onclick="g oto_CategoryURL (document.forms[0].elements.categ orylist)">

....or name the form & use that, or use an id with
..document.getE lementById, or
document.getEle mentsByTagName( 'form').item(0) , or...

R. C. will now correct me. #:=o

Nah, RW will get there first :)

document.getEle mentsByTagName( 'form').item[0] maybe? Untested but it
seems that the gEBTN would return a collection so array syntax would
seem to be the most appropriate choice.

And even in contradiction to my own reply to this thread, the best
solution is a submit button and use onSubmit to navigate, cancel
submission, and then have server side code redirect based on the select
elements value. Then, it is not JS Dependent.
--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly

[RobB]

Randy Webb wrote:

RobB wrote:

John wrote:

Hi,

I have the following code:

<FORM>
<font size="3">Brands </font><br />
<SELECT SIZE="1" NAME="categoryl ist" STYLE="font-size: 8pt">
<OPTION VALUE=http://my.domain,.com/cetegory1.html
selected>Catego ry

1</OPTION>
<OPTION VALUE=http://my.domain,.com/cetegory2.html> Category
2</OPTION>
<OPTION VALUE=http://my.domain,.com/cetegory3.html> Category
3</OPTION>
</SELECT>
<a href="javascrip t:;"
onclick="goto _CategoryURL(th is.form.categor ylist)"><img border="0"
src="../images/mybutton.gif" align="absbotto m"></a>
</FORM>

When I click on the button, I am expecting to go to the URL of the

currently

selected item in the select list. Instead, I am getting the

following

script error:

"Error: this.form has no properties"

How can I make this code work please?

Thanks,
Don

Were you calling that function from an event handler property of a form element (Button.onclick , e.g.), 'this' would reference the element
object, and, as all form elements expose a .form property - to allow easy referencing of the containing Form object - this.form.categ orylist would point to the select (this.form.elem ents.categoryli st is more
precise). Since you're calling it from a link, however - a link isn't a form element, no matter where you embed it - this' references the Link object, and Link objects have no .form property.
Use an suitable absolute reference:

<a...onclick="g oto_CategoryURL (document.forms[0].elements.categ orylist)">
....or name the form & use that, or use an id with
..document.getE lementById, or
document.getEle mentsByTagName( 'form').item(0) , or...

R. C. will now correct me. #:=o

Nah, RW will get there first :)

My Hero. #:-0
document.getEle mentsByTagName( 'form').item[0] maybe? Untested but it
seems that the gEBTN would return a collection so array syntax would
seem to be the most appropriate choice.

It does return a NodeList, with the usual .item() *method*.

document.getEle mentsByTagName( 'form')[0] is also suitable, I prefer the
encapsulation of the item() approach. Whatever that means.

Didn't test your solution - but doesn't a <button> element in a form
act as a submitter? Might be scripting a race condition there (whatever
that means).

cheers, Rob

[Randy Webb]

RobB wrote:

Randy Webb wrote:

RobB wrote:

<--snip-->

R. C. will now correct me. #:=o

Nah, RW will get there first :)

My Hero. #:-0

document.getE lementsByTagNam e('form').item[0] maybe? Untested but it
seems that the gEBTN would return a collection so array syntax would
seem to be the most appropriate choice.

It does return a NodeList, with the usual .item() *method*.

Thats why I usually stick to the document.forms approach, doesn't give
me as many headaches :)

But, since its a nodelist with a method, then the array syntax doesn't
seem as obvious anymore.
document.getEle mentsByTagName( 'form')[0] is also suitable, I prefer the
encapsulation of the item() approach. Whatever that means.

Didn't test your solution - but doesn't a <button> element in a form
act as a submitter? Might be scripting a race condition there (whatever
that means).

Not sure :) But I had something like this in mind:

<form onsubmit="retur n someFunction()" action="somePag e.php" .....>

<input type="submit" value="Change Locations">

Where the someFunction() would return false to cancel the submit.

Then, the only time it gets submitted is non-JS. somePage.php would read
the selects value and set a Location.Header to correspond to it. Thus,
making it "work" for non-JS browsers.

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly