Liste déroulante avec lien avec autre page
Résolu
mela
-
Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention -
Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'aimerai mettre sur mon site plusieurs listes déroulantes, dans chaque liste j'aimerai que lorsque l'on clique sur un choix, cela me dirige vers une autre page.
J'ai réussi à le faire avec ce code :
<script type="text/javascript">
window.onload = function() {
formulaire = document.getElementById('form_url');
formulaire.onsubmit = function() {
if(this.elements[0].value != "") {
document.location.href = this.elements[0].value;
}
};
formulaire.elements[0].onchange = function() {
if(this.value != "") {
document.location.href = this.value;
}
};
};
</script>
<form action="redirection.php" methode="post" id="form_url">
<p>
<label for="url">Menu :</label>
<select name="url" id="url">
<option value="">Choisissez :</option>
<option value="image/Documents/LettreFFJBT/n180.pdf">Accueil</option>
<option value="news.html">Les news</option>
<option value="contact.html">Nous contacter</option>
</select>
</p>
</form>
Mais quand je rajoute une seconde liste ça ne marche plus. Pourquoi?
Merci par avance pour vote aide.
J'aimerai mettre sur mon site plusieurs listes déroulantes, dans chaque liste j'aimerai que lorsque l'on clique sur un choix, cela me dirige vers une autre page.
J'ai réussi à le faire avec ce code :
<script type="text/javascript">
window.onload = function() {
formulaire = document.getElementById('form_url');
formulaire.onsubmit = function() {
if(this.elements[0].value != "") {
document.location.href = this.elements[0].value;
}
};
formulaire.elements[0].onchange = function() {
if(this.value != "") {
document.location.href = this.value;
}
};
};
</script>
<form action="redirection.php" methode="post" id="form_url">
<p>
<label for="url">Menu :</label>
<select name="url" id="url">
<option value="">Choisissez :</option>
<option value="image/Documents/LettreFFJBT/n180.pdf">Accueil</option>
<option value="news.html">Les news</option>
<option value="contact.html">Nous contacter</option>
</select>
</p>
</form>
Mais quand je rajoute une seconde liste ça ne marche plus. Pourquoi?
Merci par avance pour vote aide.
A voir également:
- Liste déroulante avec lien avec autre page
- Liste déroulante excel - Guide
- Liste déroulante en cascade - Guide
- Partager des photos avec un lien - Guide
- Lien url - Guide
- Supprimer page word - Guide
5 réponses
pas besoin de plusieurs fonctions, il suffit de passer la ref de la liste en argument à la fonction:
<script type="text/javascript">
function rediriger(id_liste){
obj=document.getElementById(id_liste);
if(obj.value !=""){
document.location.href=obj.value;
}
}
</script>
<form action="redirection.php" methode="post" id="form_url">
<p>
<label for="url">Menu :</label>
<select name="url1" id="url1" onChange="rediriger('url1');">
<option value="">Choisissez :</option>
<option value="image/Documents/LettreFFJBT/n180.pdf">Accueil</option>
<option value="news.html">Les news</option>
<option value="contact.html">Nous contacter</option>
</select>
<select name="url2" id="url2" onChange="rediriger('url2');">
<option value="">Choisissez :</option>
<option value="image/Documents/LettreFFJBT/blabla.pdf">blabla</option>
<option value="A.html">A</option>
<option value="B.html">B</option>
</select>
</p>
parce que avec : elements[0] tu prends uniquement la première liste déroulante c a d <select name="url" id="url"> ...
Si tu met plusieurs listes déroulantes il te faut soit plusieurs fonctions (une par liste) soit une boucle qui recense toute tes listes déroulantes.
Si tu met plusieurs listes déroulantes il te faut soit plusieurs fonctions (une par liste) soit une boucle qui recense toute tes listes déroulantes.
MErci pour ta réponse. Je suis novice dans la programmation, est-ce que tu pourrais m'indiquer comment faire pour créer une boucle qui recense toutes mes listes. Merci
A la place de :
formulaire.elements[0].onchange = function() {
if(this.value != "") {
document.location.href = this.value;
}
};
J'aurai fait un truc dans ce genre:
var selects = formulaire.getElementsByTagName('select');
for(x in selects){
x.onchange = function() {
if(this.value != "") {
document.location.href = this.value;
}
};
}
Il y a peut être des erreurs, je suis désolé mais je n'ai pas le temps de vérifier ce soir.
formulaire.elements[0].onchange = function() {
if(this.value != "") {
document.location.href = this.value;
}
};
J'aurai fait un truc dans ce genre:
var selects = formulaire.getElementsByTagName('select');
for(x in selects){
x.onchange = function() {
if(this.value != "") {
document.location.href = this.value;
}
};
}
Il y a peut être des erreurs, je suis désolé mais je n'ai pas le temps de vérifier ce soir.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
2 ième liste liée comment ?
si tu n'as pas beaucoup de valeurs deuxieme liste liées aux valeurs de la 1 ière tu peux les mettre dans des array javascript et le choix listappele javascript qui genere la 2 ième par l'array correspondant
sinon si c'est plius lours et si tes valeurs sont dans une bdd par exemple, et si tu ne veux pas recharger la page il faut passer par AJAX, c'est nettement plus compliqué
si tu n'as pas beaucoup de valeurs deuxieme liste liées aux valeurs de la 1 ière tu peux les mettre dans des array javascript et le choix listappele javascript qui genere la 2 ième par l'array correspondant
sinon si c'est plius lours et si tes valeurs sont dans une bdd par exemple, et si tu ne veux pas recharger la page il faut passer par AJAX, c'est nettement plus compliqué
Merci.