Discussion :

[laurentSc]

Bonsoir,

j'aimerais savoir comment faire une liste déroulante sans bouton "valider". Je mets ici l'URL où j'ai vu ça, et le code associé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<form name="selector">
	    <select name="liste" size="1" style="font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:12px;"
	            onchange="javascript:parent.grille.window.location = '_grille.html'; javascript:parent.periode.window.location = this.options[selectedIndex].value;">
                <option value="_blank.html">Sélectionner une classe</option>
            <option value="3A.html">3A</option>
            <option value="3B.html">3B</option>
            <option value="3C.html">3C</option>
            <option value="3D.html">3D</option>
            <option value="3E.html">3E</option>
            <option value="3F.html">3F</option>
            <option value="3I.html">3I</option>
            <option value="4A.html">4A</option>
            <option value="4B.html">4B</option>
            <option value="4C.html">4C</option>
            <option value="4D.html">4D</option>
            <option value="4E.html">4E</option>
            <option value="4F.html">4F</option>
            <option value="5A.html">5A</option>
            <option value="5B.html">5B</option>
            <option value="5C.html">5C</option>
            <option value="5D.html">5D</option>
            <option value="5E.html">5E</option>
            <option value="5F.html">5F</option>
            <option value="6A.html">6A</option>
            <option value="6B.html">6B</option>
            <option value="6C.html">6C</option>
            <option value="6D.html">6D</option>
            <option value="6E.html">6E</option>
            <option value="6F.html">6F</option>
            <option value="6G.html">6G</option>
            </select>
	</form>

Peut-on m'expliquer le contenu du "select", notamment ce qu'il y a derrière le "onchange", ainsi que celui qu'on voit qd on a sélectionné le premier ?

[KawaJVC]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<form name="formulaire1">
<select onchange="document.formulaire1.submit();">
<option>lala</option>
<option>lolo</option>
<option>lili</option>
</select>

En gros quand une réponse est choisie le formulaire se sauvegarde.

[laurentSc]

Cela veut dire que la valeur choisie est envoyée au serveur sans submit ? Et comment fait-on si on veut lancer une page en fct de la valeur choisie ? Et quelle est la signification du javascript ds le code que j'avais montré ?

[KawaJVC]

Oui , la valeur est envoyée sans bouton submit , le javascript permet de sauvegarder des form facilement.

Fct ? Je connais pas c'est quoi ?


Sinon pour ton code , si tu as remarqué la valeur des options sont le nom d'une page , en fait ils te redirigent sur la page indiquée dans la valeur je crois.

[Deallyra]

Fct pour fonction.

La fonction onChange doit faire appel à une méthode que tu aurais écrite en JavaScript.

Tu peux faire une simple redirection vers une page (php) contenant un controlleur.
Ce controlleur serait en fait un Switch (php).

Enfin tu as d'autres façons de faire mais bon.

Là, ce doit être full JS donc un selon JS

[laurentSc]

Je suis pour l'option de rediriger vers une page php (vu que je connais le php), mais le pb, c'est que la page s'appelle "xx.php", donc faut-il écrire "onchange="document.xx.php.submit();"? J'en doute vu que ça ne marche pas ; mais que faut-il faire ?

[Mr Pink Eyes]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<form name="formulaire1" action="maPage.php">
<select onchange="document.formulaire1.submit();" name="truc">
<option value="1">lala</option>
<option value="2">lolo</option>
<option value="3">lili</option>
</select>
</form>

Devrait marcher si je ne trompe pas. Le onchange="document.formulaire1.submit();" indiquant que lorsqu'un élement de la liste sera sélectionner, cela lancera le submit de ton formulaire (comme un clic sur un bouton submit quoi). Du coup ta page sera appelée sous forme mapage.php?truc=1

[laurentSc]

J'ai qq doutes, car autant ça, ça marche,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 <form name="formulaire1" action="essai.html" method="post">
 <select name="edt">
 <option value="3C">3C</option>
 </select>
<input value="valider" name="valid" type="submit">
<form>

autant ça, ça ne marche pas...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
  <form name="formulaire1" action="essai.html" method="post">
 <select onchange="document.formulaire1.submit();" name="edt">
 <option value="3C">3C</option>
 </select>
 </form>

, ça ne marche pas...

[12monkeys]

Bonjour,

Ceci devrait fonctionner :

Code javascript dans l'entête :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<script language="JavaScript" type="text/javascript"><!--//
function gotonewpage(what)
{
  value = what.options[what.selectedIndex].value;
  if (value == "") return;
  window.location.href = value;
}
//--></script>
</head>

et la liste déroulante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
	<fieldset class="fld-typri">
	  <legend>Quel est le type de votre annonce&nbsp;</legend>
	  <ul>
	    <li class="cse1 coul1">
Type de votre annonce :
	    </li>
	    <li class="cse2 coul2">
	      <select onchange="gotonewpage(this)" name="type_principal">
		<option selected>Choisir dans la liste</option>
		<option value="formulaire.php?id=1">Vente</option>
		<option value="formulaire.php?id=2">Immobilier</option>
		<option value="formulaire.php?id=3">Services</option>
		<option value="formulaire.php?id=4">Trocs - Echanges</option>
		<option value="formulaire.php?id=5">Acheter - Rechercher</option>
		<option value="formulaire.php?id=6">Autres</option>
	      </select>
	    </li>
	  </ul>
	</fieldset>

[laurentSc]

Bonjour,

est-ce que ds ta réponse, l'action du formulaire est "formulaire.php" ?

[Deallyra]

u__u

c'est marqué dans les values...

[Mr Pink Eyes]

Je crois que ce qui le dérange c'est l'absence de balise <form>

[12monkeys]

Bonjour,

est-ce que ds ta réponse, l'action du formulaire est "formulaire.php" ?

Oui, le choix d'un élément dans la liste déroulante renvoi vers formulaire.php...

[laurentSc]

Je crois que ce qui le dérange c'est l'absence de balise <form>

exactement ; je suppose que je rajoute

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<form action="formulaire.php"...>

[12monkeys]

Bon voilà ce qui se passe quand on va trop vite et qu'on réfléchit pas assez

Tout dépend de ce que tu veux faire exactement... Si tu veux transmettre des informations d'un formulaire (sans bouton valider) mon code ne fonctionne pas...

Maintenant je suis allé voir le lien que tu indiques et là mon code aboutit au même résultat... Et là tu n'as pas besoin de <form> vu que ce n'est pas un formulaire. Je ne dis pas que c'est juste, en tout cas mon code passe la validation w3c (sauf le script javascript).

Le changement dans la liste renvoi vers la page indiquée dans value, tout simplement.

[Mr Pink Eyes]

Reprenons depuis le début :

Peut-on m'expliquer le contenu du "select", notamment ce qu'il y a derrière le "onchange", ainsi que celui qu'on voit qd on a sélectionné le premier ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onchange="javascript:parent.grille.window.location = '_grille.html'; javascript:parent.periode.window.location = this.options[selectedIndex].value;"

La partie la plus importante (pour toi) est celle-ci : javascript:parent.periode.window.location = this.options[selectedIndex].value;. Cette instruction dit "quand on change la selection de la liste déroulante, on va sur saValeur.html. Sa valeur est ce qui est indiqué par value= dans les balises option. Par exemple la valeur du premier vaut 3A.html donc le javascript va lancer javascript:parent.periode.window.location = 3A.html; et 3A.html sera le document (la webpage) qui va remplacer le document courrant.

Est-ce que ça t'éclaire un peu plus ? Car le code peut être réutilisable du coup pour te dépanner. Il suffit que tu reformules les balises option en mettant en value les liens vers où tu veux aller.

[laurentSc]

J'ai appliqué ce qu'a dit l'alsaco-lorrain, et ça marche, mais avant, j'avais essayé ce que disait Mr Pink Eyes (le fait que ça soit réutilisable me plaisait), mais ça ne marchait pas, mais en fait, le code avec le script javascript est réutilisable aussi...

[laurentSc]

Désolé d'être un peu ignare en php, mais je ne me rappelle pas comment récupérer id qd on le passe comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

value="formulaire.php?id=1"

Peux-tu me le rappeler ?

[Deallyra]

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$id = $_GET['id']
 
echo $id //affiche 1