Forum d'entraide PHPFrance

Bonsoir,

J'aurais aimé avoir un peu d'aide à propos de la création d'un formulaire "dynamique" (Qui change en fonction des choix).
Un exemple est toujours plus apprécié qu'une longue explication

Choix 1 : Fille ou Garçon
Choix 2 : Foot, , Rugby, Dance, Gymnastique.

J'aimerais que les filles puissent choisir que Dance et Gymnastique, et les garçons Foot et Rugby.

Cela est possible grâce à Javascript mais je n'arrive pas à le mettre en oeuvre.. En espérant avoir une réponse, je suis disponible pour toutes questions

Bah là comme ça, je dirais:

Soit XHTML
liste 1 (id=#liste1): Fille/Garcon
liste 2 (id=#liste2) : Basket/Foot/Rugby
liste 3 (id=#liste3) : Poupées/Danse/Papotages

Soit CSS

liste 2, liste 3 : display:none;

Soit Javascript :

$("#liste1").change( function() {
var valeur = $(this).val();
if (valeur == "Fille") {
$("#liste2").hide(0);
$("#liste3").show();
} else {
$("#liste2").show();
$("#liste3").hide(0);
}
});

Bonjour,

Merci beaucoup de ta réponse Devlop78,
Je ne connais hélas pas encore le javascript.. donc je ne vois pas trop comment l'intégrer dans ma page..
Je vais vous faire voir ce que je souhaites faire plus exactement sans prendre d'exemple. Voici le corps de ma page (en version réduite).

<div id="corps">

<table width="55%" border="0" cellspacing="0" cellpadding="0" align="center">
	<form name=inscipt action="verif_perso.php" method='post' enctype="multipart/form-data">
		<tr>
			<td colspan=2 align=center><strong><t1>Ajoutez votre Personnage</t1></strong><br/><br/><br/></td>
		</tr>
		
		
		<tr>
			<td><FONT size="1">Classe :&nbsp;</font></td>
			<td>	<select name="classe">
					<option value="Chaman">Chaman</option>
					<option value="Chasseur">Chasseur</option>
					<option value="Chevalier de la mort">Chevalier de la mort</option>
					<option value="Demoniste">Démoniste</option>
					<option value="Druide">Druide</option>
					<option value="Guerrier">Guerrier</option>
					<option value="Mage">Mage</option>
					<option value="Paladin">Paladin</option>
					<option value="Pretre">Prêtre</option>
					<option value="Voleur">Voleur</option>
					</select></td>
		</tr>
		<tr>
			<td><FONT size="1">Spécialisation Principale :&nbsp;</font></td>
			<td>	<select name="spe1">
					<option value="Affliction">Affliction</option>
					<option value="Amélioration">Amélioration</option>
					<option value="Arcane">Arcane</option>
					<option value="Armes">Armes</option>
					<option value="Assassinat">Assassinat</option>
					<option value="Combat Farouche">Combat Farouche</option>
					<option value="Démonologie">Démonologie</option>
					<option value="Destruction">Destruction</option>
					<option value="Discipline">Discipline</option>
					<option value="Elémentaire">Elémentaire</option>
					<option value="Equilibre">Equilibre</option>
					<option value="Estropier">Estropier</option>
					<option value="Feu">Feu</option>
					<option value="Finesse">Finesse</option>
					<option value="Furie">Furie</option>
					<option value="Givre">Givre</option>
					<option value="Impie">Impie</option>
					<option value="Maîtrise des bêtes">Maîtrise des bêtes</option>
					<option value="Ombre">Ombre</option>
					<option value="Précision">Précision</option>
					<option value="Protection">Protection</option>
					<option value="Restauration">Restauration</option>
					<option value="Sang">Sang</option>
					<option value="Sacré">Sacré</option>
					<option value="Survie">Survie</option>
					<option value="Vindicte">Vindicte</option>
					</select></td>
		</tr>
	
		<tr>
			<td colspan=2 align=center><br><input type="submit" name="submit" value="Enregistrer" class="button"><br/><br/></td>
		</tr>
</table>
	</form>


</div>

Ce que je recherche à faire c'est quand un membre choisis la première option "Chaman" les seules options possible pour la variable $spe1 soit :
- Amélioration
- Élémentaire
- Restauration.

Que je vois comment ça fonctionne.. :S

Là, vu la quantité, on peut envisager de désactiver les options plutot que les select. Mais on va rester sur les select. Donc tu crées autant de select que de personnages. On va appeler par exemple les select avec le nom des personnages
Ca c'est la partie XHTML, ou HTML puisque j'ai vu que tu utilisais les tableaux de façon à priori injustifiée.
Coté CSS, on a, dans <head></head> :

<style type="text/css">
.cache { display : none; }
</style>

Donc, par défaut, tes champs spécifiques sont cachés, donc inaccessibles par l'utilisateur (enfin, tout est relatif mais ça ira t'inquiètes :p)
Maintenant Javascript. Télécharge au préalable jQuery car je travaille avec. Ensuite, insère le dans le <head></head>.

Rajoute dans <head></head>

Merci pour ta réponse, j'essaye ça tout de suite

Bonsoir,

Merci encore pour ta réponse encore plus précise
J'ai suivi les instructions que tu m'a donné, voici ce que j'obtiens : http://soagaming.free.fr/home/test.php
A priori, j'ai dût oublier quelque chose, mais quoi... Je suis en train de chercher..

C'est simple :

- Tu as oublié jQuery
- Tu ne dois appliquer les évenements qu'une fois le DOM chargé dans ce cas, donc entourer le code JAVASCRIPT par $(document).ready(function () { ... });

A+

Merci d'avoir répondu..

Je n'ai pas vraiment compris, j'ai bien télécharger le fichier Jquery, mais je ne sais pas quoi en faire. Je le upload à la racine du site ? Dans le même dossier que la page "test.php" ?
Et le "$(document).ready(function () { ... });" Je le place où dans mon code.. ? Comme ceci ?
Désolé de t'embêter mais je suis totalement perdu..

<script type="text/javascript" src="jquery.js">
<script type="text/javascript">
$(document).ready (function () {
$("#selection").change( function() {
var valeur = $(this).val();
$(".cache").hide(0);
$("#" + valeur).show();
});

});
</script>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready (function () {
$("#selection").change( function() {
var valeur = $(this).val();
$(".cache").hide(0);
$("#" + valeur).show();
});

});
</script>


Il faut que jquery.js soit présent dans ton répertoire ...

Je t'aide là mais si tu as d'autres choses à modifier par la suite, tu iras lire des tutos ... Je suis pas là pour faire le travail à la place des autres (ou alors il faut me payer =D> )

Merci infiniment !

J'ai enfin une piste qui m'aide réellement
Je comprend ta réaction mais tu n'as pas besoin de plus m'aider, merci, merci, merci !


Amicalement !

Voilà ça marche !

Je t'adore <3