onchange() doesn't seem to work

[Mattias Campe]

Hello,

On http://student.ugent.be/astrid/bewoners.php I got the problem that I
want Javascript to let my browser go to
http://student.ugent.be/astrid/bewoners.php?beginAcjaar=2002 when I
select 2002-03 in the form in the upper right corner (idem dito for the
other years).

My form is composed by:
<form method="post" action="bewoners.php">
<select onchange="veranderAcjaar()" name="selecteerAcjaar">
<option>2001-02</option>
<option>2002-03</option>
<option>2003-04</option>
</select>
</form>

and my Javascript code (that I've placed in <head/>):
<script language="Javascript" type="text/javascript">
function veranderAcjaar() {
var acjaar =
selecteerAcjaar.options[selecteerAcjaar.selectedIndex].value
location =
"http://student.ugent.be/astrid/bewoners.php?beginAcjaar=" + acjaar
}
</script>


What could be wrong with this code? It /seems/ right to me, but
apparently it isn't. The browser doesn't even seem to execute the
function :-s (hmm, my knowledge of Javascript doesn't seem that good :-/)



Any help would be appreciated,
greetings,
Mattias

 

[Lasse Reichstein Nielsen]

On http://student.ugent.be/astrid/bewoners.php I got the problem that
I want Javascript to let my browser go to
http://student.ugent.be/astrid/bewoners.php?beginAcjaar=2002 when I
select 2002-03 in the form in the upper right corner (idem dito for
the other years).

I see two problems.

My form is composed by:
<form method="post" action="bewoners.php">
<select onchange="veranderAcjaar()" name="selecteerAcjaar">
<option>2001-02</option> ....
and my Javascript code (that I've placed in <head/>):
<script language="Javascript" type="text/javascript">
function veranderAcjaar() {
var acjaar =
selecteerAcjaar.options[selecteerAcjaar.selectedIndex].value

Problem one: You haven't declared the variable "selecteerAcjaar".
Some browsers (most notably IE) automatically declare global variables
with the same name as named elements on the page. Other browsers
don't. Change this to
var selRef = document.forms[0].elements['selecteerAcjaar'];
var acjaar = selRef.options[selRef.selectedIndex].text;
(or, preferably, pass the selRef as an argument to the function as
onchange="veranderAcjaar(this);" )

Problem two: notice the ".text" at the end instead of ".value". The
content of an option is the "text" property, not the "value"
property. The value is specified as

location =
"http://student.ugent.be/astrid/bewoners.php?beginAcjaar=" +
acjaar

I prefer
location.href = ...
And remember the semicolon at the end.

What could be wrong with this code? It /seems/ right to me, but
apparently it isn't. The browser doesn't even seem to execute the
function :-s (hmm, my knowledge of Javascript doesn't seem that good
:-/)

Nor your knowledge of how to make browsers show error messages:
<URL:http://jibbering.com/faq/#FAQ4_43>

/L

 

[Mattias Campe]

On http://student.ugent.be/astrid/bewoners.php I got the problem that
I want Javascript to let my browser go to
http://student.ugent.be/astrid/bewoners.php?beginAcjaar=2002 when I
select 2002-03 in the form in the upper right corner (idem dito for
the other years).

I see two problems.

My form is composed by:
<form method="post" action="bewoners.php">
<select onchange="veranderAcjaar()" name="selecteerAcjaar">
<option>2001-02</option>
...

and my Javascript code (that I've placed in <head/>):
<script language="Javascript" type="text/javascript">
function veranderAcjaar() {
var acjaar =
selecteerAcjaar.options[selecteerAcjaar.selectedIndex].value

Problem one: You haven't declared the variable "selecteerAcjaar".
Some browsers (most notably IE) automatically declare global variables
with the same name as named elements on the page. Other browsers
don't.

Thanks for pointing me on this one, I also like my code most when it
doesn't have to presume anything about the used browser...

Change this to
var selRef = document.forms[0].elements['selecteerAcjaar'];
var acjaar = selRef.options[selRef.selectedIndex].text;
(or, preferably, pass the selRef as an argument to the function as
onchange="veranderAcjaar(this);" )

Do you mean that I could just use the following with veranderAcjaar(this):
var acjaar = this.options[selRef.selectedIndex].text;
?

Problem two: notice the ".text" at the end instead of ".value". The
content of an option is the "text" property, not the "value"
property. The value is specified as
<option value="Value">text</option>
ic



I prefer
location.href = ...
done

And remember the semicolon at the end.

Indeed, forgot about it :-s

Nor your knowledge of how to make browsers show error messages:
<URL:http://jibbering.com/faq/#FAQ4_43>

Wauw, thanks for all the help, that link is bookmarked ! But,
unfortunately, it still doesn't work. When I use the Javascript console
from Firefox, it tells me:
Error: selRef has no properties
Source file: http://student.ugent.be/astrid/bewoners.php Line:25

I checked the faq you gave me and http://jibbering.com/faq/#FAQ4_13 uses
quiet the same syntax that you gave me, so I don't see a problem there.
I hope you could help me again a little bit further .

For the completeness, here's the new code:
<script language="Javascript" type="text/javascript">
function veranderAcjaar() {
var selRef = document.forms[0].elements['selecteerAcjaar'];
var acjaar = selRef.options[selRef.selectedIndex].text;
location.href =
"http://student.ugent.be/astrid/bewoners.php?beginAcjaar=" + acjaar;
}
</script>

and:
<form method="post" action="bewoners.php">
<select onchange="veranderAcjaar()" name="selecteerAcjaar">
<option>2001-02</option>
<option>2002-03</option>
<option>2003-04</option>
</select>
</form>

Greetings,
Mattias

 

[Morris]

On http://student.ugent.be/astrid/bewoners.php I got the problem that
I want Javascript to let my browser go to
http://student.ugent.be/astrid/bewoners.php?beginAcjaar=2002 when I
select 2002-03 in the form in the upper right corner (idem dito for
the other years).

I see two problems.

My form is composed by:
<form method="post" action="bewoners.php">
<select onchange="veranderAcjaar()" name="selecteerAcjaar">
<option>2001-02</option>
...

and my Javascript code (that I've placed in <head/>):
<script language="Javascript" type="text/javascript">
function veranderAcjaar() {
var acjaar =
selecteerAcjaar.options[selecteerAcjaar.selectedIndex].value

Problem one: You haven't declared the variable "selecteerAcjaar".
Some browsers (most notably IE) automatically declare global variables
with the same name as named elements on the page. Other browsers
don't.

Thanks for pointing me on this one, I also like my code most when it
doesn't have to presume anything about the used browser...

Change this to
var selRef = document.forms[0].elements['selecteerAcjaar'];
var acjaar = selRef.options[selRef.selectedIndex].text;
(or, preferably, pass the selRef as an argument to the function as
onchange="veranderAcjaar(this);" )

Do you mean that I could just use the following with veranderAcjaar(this):
var acjaar = this.options[selRef.selectedIndex].text;
?

Problem two: notice the ".text" at the end instead of ".value". The
content of an option is the "text" property, not the "value"
property. The value is specified as
<option value="Value">text</option>
ic



I prefer
location.href = ...
done

And remember the semicolon at the end.

Indeed, forgot about it :-s

Nor your knowledge of how to make browsers show error messages:
<URL:http://jibbering.com/faq/#FAQ4_43>

Wauw, thanks for all the help, that link is bookmarked ! But,
unfortunately, it still doesn't work. When I use the Javascript console
from Firefox, it tells me:
Error: selRef has no properties
Source file: http://student.ugent.be/astrid/bewoners.php Line:25

I checked the faq you gave me and http://jibbering.com/faq/#FAQ4_13 uses
quiet the same syntax that you gave me, so I don't see a problem there.
I hope you could help me again a little bit further .

For the completeness, here's the new code:
<script language="Javascript" type="text/javascript">
function veranderAcjaar() {
var selRef = document.forms[0].elements['selecteerAcjaar'];
var acjaar = selRef.options[selRef.selectedIndex].text;

change the above line to:
var acjaar = selRef.options[selRef.selectedIndex].value;

location.href =
"http://student.ugent.be/astrid/bewoners.php?beginAcjaar=" + acjaar;
}
</script>

and:
<form method="post" action="bewoners.php">
<select onchange="veranderAcjaar()" name="selecteerAcjaar">
<option>2001-02</option>
<option>2002-03</option>
<option>2003-04</option>

and these to:

<option value=2001>2001-02</option>
<option value=2002>2002-03</option>

 

[Lasse Reichstein Nielsen]

For the completeness, here's the new code:
<script language="Javascript" type="text/javascript">
function veranderAcjaar() {
var selRef = document.forms[0].elements['selecteerAcjaar'];
var acjaar = selRef.options[selRef.selectedIndex].text;
location.href =
"http://student.ugent.be/astrid/bewoners.php?beginAcjaar=" + acjaar;
}
</script>

and:
<form method="post" action="bewoners.php">
<select onchange="veranderAcjaar()" name="selecteerAcjaar">
<option>2001-02</option>
<option>2002-03</option>
<option>2003-04</option>
</select>
</form>

This code works for me in Opera. Ofcourse it assumes that the relevant
form is the first form on the page (forms[0]). If it isn't, it will fail.
That is why I recommended passing the select as an argument:
---
<script type="text/javascript">
function veranderAcjaar(selRef) {
var acjaar = selRef.options[selRef.selectedIndex].text;
location.href =
"http://student.ugent.be/astrid/bewoners.php?beginAcjaar=" + acjaar;
}
</script>
---
and:
---
<form method="post" action="bewoners.php">
<select onchange="veranderAcjaar(this);" name="selecteerAcjaar">
<option>2001-02</option>
<option>2002-03</option>
<option>2003-04</option>
</select>
</form>
---
(Why the form, btw? You don't use it, since there is no way to submit
it. You can omit the form element entirely when you address the select
directly like this, unless you need the page to work in Netscape 4 too

/L

 

[Mattias Campe]

Lasse Reichstein Nielsen wrote:
[...]

This code works for me in Opera. Ofcourse it assumes that the relevant
form is the first form on the page (forms[0]). If it isn't, it will fail.
That is why I recommended passing the select as an argument:
---
<script type="text/javascript">
function veranderAcjaar(selRef) {
var acjaar = selRef.options[selRef.selectedIndex].text;
location.href =
"http://student.ugent.be/astrid/bewoners.php?beginAcjaar=" + acjaar;
}
</script>
---
and:
---
<form method="post" action="bewoners.php">
<select onchange="veranderAcjaar(this);" name="selecteerAcjaar">
<option>2001-02</option>
<option>2002-03</option>
<option>2003-04</option>
</select>
</form>

I uses (this) and I also used the remark by Morris, because
?beginAcjaar="2001-02" will not work, it has to be ?beginacjaar="2001"
(stupid me :-/ )

(Why the form, btw? You don't use it, since there is no way to submit
it. You can omit the form element entirely when you address the select
directly like this, unless you need the page to work in Netscape 4 too

Well, I thought that a <select> had to be surrounded by <form>, but as
this doesn't seem to be true, I just omitted it.


Really, thanks a lot for the help!
Greetings,
Mattias

 

[Mattias Campe]

"Mattias Campe" <[email protected]> a écrit dans le message

change the above line to:
var acjaar = selRef.options[selRef.selectedIndex].value;

location.href =
"http://student.ugent.be/astrid/bewoners.php?beginAcjaar=" + acjaar;
}
</script>

and:
<form method="post" action="bewoners.php">
<select onchange="veranderAcjaar()" name="selecteerAcjaar">
<option>2001-02</option>
<option>2002-03</option>
<option>2003-04</option>

and these to:

<option value=2001>2001-02</option>
<option value=2002>2002-03</option>
<option value=2003>2003-04</option>

Of course! How could I overlook that :-/


Really, thanks a lot for the help!
It works now: http://student.ugent.be/astrid/bewoners.php
Greetings,
Mattias

 

[G Roydor]

Donner un nom à votre formulaire (<form name="myform" ....>)
et var acjaar=myform.select..........
GR

Mattias Campe a écrit:

 

[Mattias Campe]

Donner un nom à votre formulaire (<form name="myform" ....>)
et var acjaar=myform.select..........

Merci beaucoup, mais j'ai déja une solution ...

GR

Mattias Campe a écrit:

Hello,

On http://student.ugent.be/astrid/bewoners.php I got the problem that
I want Javascript to let my browser go to
http://student.ugent.be/astrid/bewoners.php?beginAcjaar=2002 when I
select 2002-03 in the form in the upper right corner (idem dito for
the other years).

My form is composed by:
<form method="post" action="bewoners.php">
<select onchange="veranderAcjaar()" name="selecteerAcjaar">
<option>2001-02</option>
<option>2002-03</option>
<option>2003-04</option>
</select>
</form>

and my Javascript code (that I've placed in <head/>):
<script language="Javascript" type="text/javascript">
function veranderAcjaar() {
var acjaar =
selecteerAcjaar.options[selecteerAcjaar.selectedIndex].value
location =
"http://student.ugent.be/astrid/bewoners.php?beginAcjaar=" + acjaar
}
</script>


What could be wrong with this code? It /seems/ right to me, but
apparently it isn't. The browser doesn't even seem to execute the
function :-s (hmm, my knowledge of Javascript doesn't seem that good :-/)



Any help would be appreciated,
greetings,
Mattias