Help solving select list javascript error

[John]

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

 

[RobB]

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

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

 

[Randy Webb]

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?

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.categorylist')">
Click me, in JS enabled browsers, to go to a URL
</button>

And then validate your HTML.

 

[Randy Webb]

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

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

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.

 

[RobB]

Nah, RW will get there first

My Hero. #:-0

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.

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

 

[Randy Webb]

RobB wrote:

Nah, RW will get there first

My Hero. #:-0

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.

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.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).

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.