Help solving select list javascript error

Hi,

I have the following code:

<FORM>
<font size="3">Brands </font><br />
<SELECT SIZE="1" NAME="categorylist" STYLE="font-size: 8pt">
<OPTION VALUE=http://my.domain,.com/cetegory1.html selected>Category
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="javascript:;"
onclick="goto_CategoryURL(this.form.categorylist)" ><img border="0"
src="../images/mybutton.gif" align="absbottom"></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

John wrote:[color=blue]
> Hi,
>
> I have the following code:
>
> <FORM>
> <font size="3">Brands </font><br />
> <SELECT SIZE="1" NAME="categorylist" STYLE="font-size: 8pt">
> <OPTION VALUE=http://my.domain,.com/cetegory1.html[/color]
selected>Category[color=blue]
> 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="javascript:;"
> onclick="goto_CategoryURL(this.form.categorylist)" ><img border="0"
> src="../images/mybutton.gif" align="absbottom"></a>
> </FORM>
>
> When I click on the button, I am expecting to go to the URL of the[/color]
currently[color=blue]
> selected item in the select list. Instead, I am getting the[/color]
following[color=blue]
> script error:
>
> "Error: this.form has no properties"
>
> How can I make this code work please?
>
> Thanks,
> Don[/color]

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.categorylist
would point to the select (this.form.elements.categorylist 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="goto_CategoryURL(document.forms[0].elements.categorylist)">

....or name the form & use that, or use an id with
..document.getElementById, or
document.getElementsByTagName('form').item(0), or...

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

John wrote:[color=blue]
> Hi,
>
> I have the following code:
>
> <FORM>
> <font size="3">Brands </font><br />
> <SELECT SIZE="1" NAME="categorylist" STYLE="font-size: 8pt">
> <OPTION VALUE=http://my.domain,.com/cetegory1.html selected>Category
> 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="javascript:;"
> onclick="goto_CategoryURL(this.form.categorylist)" ><img border="0"
> src="../images/mybutton.gif" align="absbottom"></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?[/color]

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_CategoryURL() defined?

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

<button onclick="goto_CategoryURL('document.myForm.categor ylist')">
Click me, in JS enabled browsers, to go to a URL
</button>

And then validate your HTML.

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

RobB wrote:
[color=blue]
> John wrote:
>[color=green]
>>Hi,
>>
>>I have the following code:
>>
>><FORM>
>> <font size="3">Brands </font><br />
>> <SELECT SIZE="1" NAME="categorylist" STYLE="font-size: 8pt">
>> <OPTION VALUE=http://my.domain,.com/cetegory1.html[/color]
>
> selected>Category
>[color=green]
>>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="javascript:;"
>>onclick="goto_CategoryURL(this.form.categorylist )"><img border="0"
>>src="../images/mybutton.gif" align="absbottom"></a>
>></FORM>
>>
>>When I click on the button, I am expecting to go to the URL of the[/color]
>
> currently
>[color=green]
>>selected item in the select list. Instead, I am getting the[/color]
>
> following
>[color=green]
>>script error:
>>
>>"Error: this.form has no properties"
>>
>>How can I make this code work please?
>>
>>Thanks,
>>Don[/color]
>
>
> 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.categorylist
> would point to the select (this.form.elements.categorylist 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="goto_CategoryURL(document.forms[0].elements.categorylist)">
>
> ....or name the form & use that, or use an id with
> ..document.getElementById, or
> document.getElementsByTagName('form').item(0), or...
>
> R. C. will now correct me. #:=o
>[/color]

Nah, RW will get there first :)

document.getElementsByTagName('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.javascript FAQ - http://jibbering.com/faq & newsgroup weekly

Randy Webb wrote:[color=blue]
> RobB wrote:
>[color=green]
> > John wrote:
> >[color=darkred]
> >>Hi,
> >>
> >>I have the following code:
> >>
> >><FORM>
> >> <font size="3">Brands </font><br />
> >> <SELECT SIZE="1" NAME="categorylist" STYLE="font-size: 8pt">
> >> <OPTION VALUE=http://my.domain,.com/cetegory1.html[/color]
> >
> > selected>Category
> >[color=darkred]
> >>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="javascript:;"
> >>onclick="goto_CategoryURL(this.form.categorylist )"><img border="0"
> >>src="../images/mybutton.gif" align="absbottom"></a>
> >></FORM>
> >>
> >>When I click on the button, I am expecting to go to the URL of the[/color]
> >
> > currently
> >[color=darkred]
> >>selected item in the select list. Instead, I am getting the[/color]
> >
> > following
> >[color=darkred]
> >>script error:
> >>
> >>"Error: this.form has no properties"
> >>
> >>How can I make this code work please?
> >>
> >>Thanks,
> >>Don[/color]
> >
> >
> > Were you calling that function from an event handler property of a[/color][/color]
form[color=blue][color=green]
> > element (Button.onclick, e.g.), 'this' would reference the element
> > object, and, as all form elements expose a .form property - to[/color][/color]
allow[color=blue][color=green]
> > easy referencing of the containing Form object -[/color][/color]
this.form.categorylist[color=blue][color=green]
> > would point to the select (this.form.elements.categorylist is more
> > precise). Since you're calling it from a link, however - a link[/color][/color]
isn't a[color=blue][color=green]
> > form element, no matter where you embed it - this' references the[/color][/color]
Link[color=blue][color=green]
> > object, and Link objects have no .form property.
> > Use an suitable absolute reference:
> >
> >[/color][/color]
<a...onclick="goto_CategoryURL(document.forms[0].elements.categorylist)">[color=blue][color=green]
> >
> > ....or name the form & use that, or use an id with
> > ..document.getElementById, or
> > document.getElementsByTagName('form').item(0), or...
> >
> > R. C. will now correct me. #:=o
> >[/color]
>
> Nah, RW will get there first :)[/color]

My Hero. #:-0
[color=blue]
> document.getElementsByTagName('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.[/color]

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

document.getElementsByTagName('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

RobB wrote:[color=blue]
> Randy Webb wrote:
>[color=green]
>>RobB wrote:
>>[/color][/color]

<--snip-->
[color=blue][color=green][color=darkred]
>>>R. C. will now correct me. #:=o
>>>[/color]
>>
>>Nah, RW will get there first :)[/color]
>
>
> My Hero. #:-0
>
>[color=green]
>>document.getElementsByTagName('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.[/color]
>
>
> It does return a NodeList, with the usual .item() *method*.[/color]

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.
[color=blue]
> document.getElementsByTagName('form')[0] is also suitable, I prefer the
> encapsulation of the item() approach. Whatever that means.[/color]


[color=blue]
> 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).[/color]

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

<form onsubmit="return someFunction()" action="somePage.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.javascript FAQ - http://jibbering.com/faq & newsgroup weekly