[RESOLU] Affichage <select> dynamique

[KoRnMuse]

Bonsoir à tous !

Je suis en train de concevoir une interface d'administration pour un site de création vestimentaire et je me heurte à un "petit" problème.

Je voudrai afficher un menu déroulant <select> et en fonction de la valeur de ce dernier s'afficherait en dessous un nouveau menu déroulant mais sans valider quoi que ce soit... ce n'est apparemment pas possible en php que je maitrise difficilement mais en javascript... que je ne maitrise pas du tout!! J'aurai donc besoin d'un petit coup de main ^^

Voilà mon bout de code, ce n'est qu'une ébauche rapide et en php juste pour expliquer ce que je voudrais faire... :

<form action='<? echo $PHP_SELF ?>' method='post' name='Form'>
<table width='100%' border='0px' cellspacing='1' cellpadding='1'>
	  <tr>
		<td>
		 	 <select name="categorie">
				 <option value="1">Vetements</option>
			 	 <option value="2">Accessoires</option>
		 	 </select>
		  </td>
	  </tr>
 	<tr>
		<td>
			<? if ($_POST['categorie'] == 1){?>
			<select name="vetements">
				 <option value="1">Hauts</option>
			 	 <option value="2">Pantalons</option>
		 	 </select>
			 <? } elseif ($_POST['categorie'] == 2){?>
			 <select name="accessoires">
				 <option value="1">Colliers</option>
			 	 <option value="2">Bracelets</option>
		 	 </select>
			 <? } ?>
   		<td>
	</tr>
</table>
</form>

La valeur du premier <select> (categorie) définit ce qui s'affiche par la suite.

Voilà, j'espère que c'est un minimum clair. Je préciserai ma démarche au cas où.

Merci d'avance !

[Sentinel]

Tu peux utiliser l'événement "onchange" de ta liste déroulante pour appeler une fonction Javascript. Laquelle peut, par exemple, demander le rechargement de la page pour afficher le reste du formulaire.

C'est sans doute le plus simple et ça devrait suffire à tes besoins, pas la peine de mettre du super Ajax++ de la mort pour ça, surtout si tu débutes.

[KoRnMuse]

Merci beaucoup pour ta réponse !

Je me suis creusé un peu la tête et j'ai améliorer un peu mon script ^^

Je suis tout à fait d'accord avec l'utilisation de l'événement onChange mais je ne sais pas quelle valeur lui donner (j'ai pas mal chercher sur le net mais en vain) et j'aimerai juste qu'il puisse lancer le rechargement de la page via le "submit".

Voici mon bout de code actuellement :

<form action='<? echo $PHP_SELF ?>' method='post' name='Form'>
<table width='100%' border='0px' cellspacing='1' cellpadding='1'>
	  <tr>
		<td>
			  <select name="categorie" onchange="????">
				 <option value="1" <? if ($_POST['categorie'] == 1){?> selected="selected" <? } ?>>Vetements</option>
				  <option value="2" <? if ($_POST['categorie'] == 2){?> selected="selected" <? } ?>>Accessoires</option>
			  </select>
		  </td>
	  </tr>
	 <tr>
		<td>
			<? if ($_POST['categorie'] == 1){?>
			<select name="vetements">
				 <option value="1">Hauts</option>
				 <option value="2">Pantalons</option>
			  </select>
		   	  <? } elseif ($_POST['categorie'] == 2){?>
			  <select name="accessoires">
				 <option value="1">Colliers</option>
				 <option value="2">Bracelets</option>
			  </select>
			  <? } ?>
		 <td>
	</tr>
	<tr>
		 <td><input type='submit' name='submit' value='Ok'/></td>
	</tr>
</table>
</form>

Voilà, si tu peux m'aider à remplir le trou

Merci encore pour ton aide !!!

[Yangzebul]

<form action="<? echo $PHP_SELF ?>" method="GET" id="changePage">

<select name="categorie" onchange="document.getElementById('changePage').submit()">

En général il vaut mieux mettre ce genre de formulaires en GET: ce sont des paramètres de navigation, s'ils sont dans l'URL tout le monde y gagne.

[KoRnMuse]

Merci pour ta réponse mais ça ne fonctionne pas chez moi ^^' le formulaire ne veut pas se valider automatiquement (ni sous Firefox ni sous IE)

J'avais trouvé cette solution document.getElementById().submit() mais ça ne fonctionne pas dans mon cas...ou alors je m'y prends mal mais bon...là je vois pas !

De plus j'aimerai si possible ne pas avoir de variables dans l'URL pour plus de transparence pour les utilisateurs. Etant donné que les valeurs de tous les <select> sont envoyées à chaque fois, le POST fera normalement très bien l'affaire

[KoRnMuse]

N'ayant toujours pas trouvé solution à mon problème, je me permet de faire un petit UP en espérant que quelqu'un pourra m'aider.

Merci d'avance.

[Yangzebul]

Bah le problème c'est que ce qu'on t'a indiqué doit fonctionner.

Si tu ne nous donne pas plus d'infos (message d'erreur de firebug) ou ton code exact je ne vois pas comment on pourrait t'aider plus.

[KoRnMuse]

Pas de problème ! C'est vrai que j'aurai du vous le recopier directement...

Alors voici mon code complet :

<form action="<? echo $PHP_SELF ?>" method="POST" id="changePage">
<table width='100%' border='0px' cellspacing='1' cellpadding='1'>
	  <tr>
		<td>
			  <select name="categorie" onChange="document.getElementById('changePage').submit();">
				 <option value="1" <? if ($_POST['categorie'] == 1){?> selected="selected" <? } ?>>Vetements</option>
				  <option value="2" <? if ($_POST['categorie'] == 2){?> selected="selected" <? } ?>>Accessoires</option>
			  </select>
		  </td>
	  </tr>
	 <tr>
		<td>
			<? if ($_POST['categorie'] == 1){?>
			<select name="vetements">
				 <option value="1">Hauts</option>
				 <option value="2">Pantalons</option>
			  </select>
				 <? } elseif ($_POST['categorie'] == 2){?>
			  <select name="accessoires">
				 <option value="1">Colliers</option>
				 <option value="2">Bracelets</option>
			  </select>
			  <? } ?>
		 <td>
	</tr>
	<tr>
		 <td><input type='submit' name='submit' value='Ok'/></td>
	</tr>
</table>
</form>

Voilà^^ j'espère que vous pourrez m'aider !

Merci encore.

[Yangzebul]

C'est un problème classique, mais extrèmement vicieux : ton bouton de soumission à pour name 'submit', hors depuis ta balise form tu as accès à la fois aux méthodes héritées par l'interface DOM de HTMLFormElement, et aux collections DOM0 (du vieux javascript antique).

Il y a donc conflit sur l'identifier 'submit' qui ici te renvoit ton bouton, plutôt que ta méthode. Solution, ne JAMAIS nommer un élément html par un mot réservé ou un nom de méthode.

Tu peux vérifier en testant par toi même :

alert(document.getElementById('changePage').submit); // -> [object HTMLInputElement]

// après renommage de ton input

alert(document.getElementById('changePage').submit); // -> function submit() { [native code] }

[KoRnMuse]

Merci beaucoup Yangzebul! ça fonctionne parfaitement désormais! En effet cette erreur est toute bête mais fallait y penser ^^'

Encore une fois, je ne regrette pas d'avoir fait appel à PC INpact!

Merci mille fois à vous tous et à bientôt !