Formulaire Dynamique

Eléphanteau du PHP | 34 Messages

28 nov. 2010, 01:14

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 :P

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 :)

devlop78
Invité n'ayant pas de compte PHPfrance

28 nov. 2010, 01:55

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);
}
});

Eléphanteau du PHP | 34 Messages

28 nov. 2010, 10:50

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

devlop78
Invité n'ayant pas de compte PHPfrance

28 nov. 2010, 18:33

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

Code : Tout sélectionner

<select name="classe" id="selection"> <option value="none">Choisir</option> <option value="batman">batman</option> <option value="Chasseur">Chasseur</option> </select <select name="spe1" id="batman" class="cache"> <option value="Affliction">Affliction</option> <option value="Amélioration">Amélioration</option> </select> <select name="spe2" id="Chasseur" class="cache"> <option value="Affliction">Soumission</option> <option value="Amélioration">Torsion</option> </select>
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>

Code : Tout sélectionner

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

Eléphanteau du PHP | 34 Messages

28 nov. 2010, 20:10

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

Eléphanteau du PHP | 34 Messages

28 nov. 2010, 20:43

Bonsoir,

Merci encore pour ta réponse encore plus précise :P
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.. :?

devlop78
Invité n'ayant pas de compte PHPfrance

28 nov. 2010, 21:10

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+

Eléphanteau du PHP | 34 Messages

28 nov. 2010, 21:19

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 ?

Code : Tout sélectionner

$(document).ready(function () { $("#selection").change( function() { var valeur = $(this).val(); $(".cache").hide(0); $("#" + valeur).show(); }); });
Désolé de t'embêter mais je suis totalement perdu..

devlop78
Invité n'ayant pas de compte PHPfrance

28 nov. 2010, 21:22

<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>

devlop78
Invité n'ayant pas de compte PHPfrance

28 nov. 2010, 21:31

<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 ...

devlop78
Invité n'ayant pas de compte PHPfrance

28 nov. 2010, 21:32

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> )

Eléphanteau du PHP | 34 Messages

28 nov. 2010, 21:38

Merci infiniment !

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


Amicalement !

devlop78
Invité n'ayant pas de compte PHPfrance

28 nov. 2010, 21:38

Voilà ça marche !

Eléphanteau du PHP | 34 Messages

28 nov. 2010, 21:40

Je t'adore <3