By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,053 Members | 1,595 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,053 IT Pros & Developers. It's quick & easy.

Help solving select list javascript error

P: n/a
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
Jul 23 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a

John wrote:
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

Jul 23 '05 #2

P: n/a
John wrote:
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.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
Jul 23 '05 #3

P: n/a
RobB wrote:
John wrote:
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.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Jul 23 '05 #4

P: n/a

Randy Webb wrote:
RobB wrote:
John wrote:
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 :)


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

Jul 23 '05 #5

P: n/a
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.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.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.