drop down navigatie werkt niet...

Status
Niet open voor verdere reacties.
J

joske66

Nieuwe gebruiker
Lid geworden
17 feb 2010
Berichten
1
Hallo,

Eerst en vooral ik ben een leek op het gebied van Javascript. Ik moet echter een website maken met een pull down menu en vond ergens een script hiervoor.

Het maken van 1 pulldown box is geen probleem, hiervoor gebruik ik de volgende code:

in de <head> :
<SCRIPT LANGUAGE="JavaScript">
function formHandler(form){
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.location.href = URL;
}

in de <body>:
<form name="form">
<select name="site" size=1 onChange="javascript:formHandler()">
<option value="" selected="selected">Home
<option value="index.html">Even voorstellen...
</select>

Ok, tot hier alles goed, maar als ik verschillende van deze boxen horizontaal naast elkaar wil zetten loopt het fout. de code in de <head> blijft hetzelfde (neem ik aan) en in de <body> maak ik er dan hetvolgende van:

<form name="form">
<select name="site" size=1 onChange="javascript:formHandler()">
<option value="" selected="selected">Home
<option value="index.html">Even voorstellen...
</select>

<select name="site2" size=1 onchange="javascript:formHandler()">
<option value="" selected="selected">Questa
<option value="fotosquesta.html">Foto's
<option value="docs.html">Documenten </option>
<option value="Shows.html">Showuitslagen </option>
</select>

<select name="site3" size=1 onchange="javascript:formHandler()">
<option value="">De Grote Zwitser </option>
<option value="Zwitser.html">Info Grote Zwitser </option>
</select>

<select name="site4" size=1 onchange="javascript:formHandler()">
<option value="">Puppies </option>
<option value="puppies.html">onze puppies </option>
</select>

<select name="site6" size=1 onchange="javascript:formHandler()">
<option value="">Contact </option>
<option value="contact.html">Contactinfo </option>
</select>

<select name="site7" size=1 onChange="javascript:formHandler()">
<option value="">Links
<option value="links.html">Diverse links
</select>

</option>
</form>


Dit werkt dus niet, dus duidelijk doe ik iets fout.. kan iemand helpen??
 
[JS]function formHandler(form){[/JS]


wijzig dit eens in:

[JS]function formHandler(){[/JS]
 
Je script was niet echt netjes geprogrammeerd. Option en Form tags waren soms niet gesloten.

onderstaand werkt.


HTML: 
<HTML>
	<HEAD>
<SCRIPT type="text/javascript">
function formHandler(strForm){
	var URL = document.forms(strForm).site.options[document.forms(strForm).site.selectedIndex].value;
	window.location.href = URL

}
</SCRIPT>
</HEAD>
<BODY>

<form name="form1">
<select name="site" size=1 onChange="formHandler('form1')">
<option value="" selected="selected">Home</option>
<option value="index.html">Even voorstellen...</option>
</select>
</form>

<form name="form2">
<select name="site" size=1 onChange="javascript:formHandler('form2')">
<option value="" selected="selected">Home</option>
<option value="index.html">Even voorstellen...</option>
</select>

<select name="site2" size=1 onchange="javascript:formHandler()">
<option value="" selected="selected">Questa</option>
<option value="fotosquesta.html">Foto's</option>
<option value="docs.html">Documenten </option>
<option value="Shows.html">Showuitslagen </option>
</select>

<select name="site3" size=1 onchange="javascript:formHandler()">
<option value="">De Grote Zwitser </option>
<option value="Zwitser.html">Info Grote Zwitser </option>
</select>

<select name="site4" size=1 onchange="javascript:formHandler()">
<option value="">Puppies </option>
<option value="puppies.html">onze puppies </option>
</select>

<select name="site6" size=1 onchange="javascript:formHandler()">
<option value="">Contact </option>
<option value="contact.html">Contactinfo </option>
</select>

<select name="site7" size=1 onChange="javascript:formHandler()">
<option value="">Links </option>
<option value="links.html">Diverse links </option>
</select>
</form>
</BODY>
</HTML>
 
nire zei:
Je script was niet echt netjes geprogrammeerd. Option en Form tags waren soms niet gesloten.

onderstaand werkt.


HTML: 
<HTML>
	<HEAD>
<SCRIPT type="text/javascript">
function formHandler(strForm){
	var URL = document.forms(strForm).site.options[document.forms(strForm).site.selectedIndex].value;
	window.location.href = URL

}
</SCRIPT>
</HEAD>
<BODY>

<form name="form1">
<select name="site" size=1 onChange="formHandler('form1')">
<option value="" selected="selected">Home</option>
<option value="index.html">Even voorstellen...</option>
</select>
</form>

<form name="form2">
<select name="site" size=1 onChange="javascript:formHandler('form2')">
<option value="" selected="selected">Home</option>
<option value="index.html">Even voorstellen...</option>
</select>

<select name="site2" size=1 onchange="javascript:formHandler()">
<option value="" selected="selected">Questa</option>
<option value="fotosquesta.html">Foto's</option>
<option value="docs.html">Documenten </option>
<option value="Shows.html">Showuitslagen </option>
</select>

<select name="site3" size=1 onchange="javascript:formHandler()">
<option value="">De Grote Zwitser </option>
<option value="Zwitser.html">Info Grote Zwitser </option>
</select>

<select name="site4" size=1 onchange="javascript:formHandler()">
<option value="">Puppies </option>
<option value="puppies.html">onze puppies </option>
</select>

<select name="site6" size=1 onchange="javascript:formHandler()">
<option value="">Contact </option>
<option value="contact.html">Contactinfo </option>
</select>

<select name="site7" size=1 onChange="javascript:formHandler()">
<option value="">Links </option>
<option value="links.html">Diverse links </option>
</select>
</form>
</BODY>
</HTML>
Klik om te vergroten...

Heel erg bedankt voor je tijd, maar werkt voorlopig nog altijd niet... Zelfs als ik bovenstaande code niet in mijn html pagina implementeer maar gewoon test als een losstaande html pagina werkt het niet...
 
Getest in internet explorer en google Chrome.

In beide werkt het. Tenminste, de eerste twee drop downs.
Ik dacht dat je de rest wel zou snappen.

Maar, ik heb de code even helemaal gefixt:

HTML: 
<HTML>
    <HEAD>
<SCRIPT type="text/javascript">
function formHandler(strForm, strElement){
    var URL = document.forms(strForm).elements(strElement).options[document.forms(strForm).elements(strElement).selectedIndex].value;
    window.location.href = URL
 
}
</SCRIPT>
</HEAD>
<BODY>
 
<form name="form1">
<select name="site" size=1 onChange="formHandler('form1', 'site')">
<option value="" selected="selected">Home</option>
<option value="index.html">Even voorstellen...</option>
</select>
</form>
 
<form name="form2">
<select name="site" size=1 onChange="javascript:formHandler('form2', 'site')">
<option value="" selected="selected">Home</option>
<option value="index.html">Even voorstellen...</option>
</select>
 
<select name="site2" size=1 onchange="javascript:formHandler('form2', 'site2')">
<option value="" selected="selected">Questa</option>
<option value="fotosquesta.html">Foto's</option>
<option value="docs.html">Documenten </option>
<option value="Shows.html">Showuitslagen </option>
</select>
 
<select name="site3" size=1 onchange="javascript:formHandler('form2', 'site3')">
<option value="">De Grote Zwitser </option>
<option value="Zwitser.html">Info Grote Zwitser </option>
</select>
 
<select name="site4" size=1 onchange="javascript:formHandler('form2', 'site4')">
<option value="">Puppies </option>
<option value="puppies.html">onze puppies </option>
</select>
 
<select name="site6" size=1 onchange="javascript:formHandler('form2', 'site6')">
<option value="">Contact </option>
<option value="contact.html">Contactinfo </option>
</select>
 
<select name="site7" size=1 onChange="javascript:formHandler('form2' 'site7')">
<option value="">Links </option>
<option value="links.html">Diverse links </option>
</select>
</form>
</BODY>
</HTML>
 
nire zei:
Getest in internet explorer en google Chrome.

In beide werkt het. Tenminste, de eerste twee drop downs.
Ik dacht dat je de rest wel zou snappen.

Maar, ik heb de code even helemaal gefixt:

HTML: 
<HTML>
    <HEAD>
<SCRIPT type="text/javascript">
function formHandler(strForm, strElement){
    var URL = document.forms(strForm).elements(strElement).options[document.forms(strForm).elements(strElement).selectedIndex].value;
    window.location.href = URL
 
}
</SCRIPT>
</HEAD>
<BODY>
 
<form name="form1">
<select name="site" size=1 onChange="formHandler('form1', 'site')">
<option value="" selected="selected">Home</option>
<option value="index.html">Even voorstellen...</option>
</select>
</form>
 
<form name="form2">
<select name="site" size=1 onChange="javascript:formHandler('form2', 'site')">
<option value="" selected="selected">Home</option>
<option value="index.html">Even voorstellen...</option>
</select>
 
<select name="site2" size=1 onchange="javascript:formHandler('form2', 'site2')">
<option value="" selected="selected">Questa</option>
<option value="fotosquesta.html">Foto's</option>
<option value="docs.html">Documenten </option>
<option value="Shows.html">Showuitslagen </option>
</select>
 
<select name="site3" size=1 onchange="javascript:formHandler('form2', 'site3')">
<option value="">De Grote Zwitser </option>
<option value="Zwitser.html">Info Grote Zwitser </option>
</select>
 
<select name="site4" size=1 onchange="javascript:formHandler('form2', 'site4')">
<option value="">Puppies </option>
<option value="puppies.html">onze puppies </option>
</select>
 
<select name="site6" size=1 onchange="javascript:formHandler('form2', 'site6')">
<option value="">Contact </option>
<option value="contact.html">Contactinfo </option>
</select>
 
<select name="site7" size=1 onChange="javascript:formHandler('form2' 'site7')">
<option value="">Links </option>
<option value="links.html">Diverse links </option>
</select>
</form>
</BODY>
</HTML>
Klik om te vergroten...

1000 x bedankt, werkt inderdaad perfect met internet explorer. Ik testte met firefox en daarmee werkt het om een of andere reden niet :( Ik sta in ieder geval al een heel stuk verder :thumb::thumb:
 
gevonden!! :D

<select name="site" size=1 onChange="javascript:formHandler('form2', 'site')">

moest worden:

<select name="site" size=1 onchange="location.href = this.value;">

Nu werkt het zowel in IE als Firefox!

Bedankt aan iedereen :)
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan