Se connecter avec
S'enregistrer | Connectez-vous

[JavaScipt] Faire apparaitre des champs

Dernière réponse : dans Programmation

bonjour a tous.

Je vous explique mon problème.
J'ai actuellement dans une de mes tables 3 champs, style(rock, rap, r&b...) groupe(pour chaque style plusieurs groupes) et musique( et pour chaque groupe leurs musiques).
Je voudrais faire dans un premier temps une liste déroulante pour que l'utilisateur choisisse sont style, ensuite à l'aide d'un code javascript, le champs groupe apparait (nouvelle liste déroulante), ensuite le champs musique apparait répertoriant toutes les musiques dans un tableau.

En sachant que toutes les données sont stocké dans ma bdd, je voudrais de l'aide pour réaliser cela...

Pour le moment j'ai réalisé :

  1. <select id="style" name="style">
    

  2. 	<option value="rock">Rock</option>
    

  3. 	<option value="rap">Rap</option>
    

  4. 	<option value="r&b">R&B</option>
    

  5. </select>


Mais j'ai du mal a réaliser la fonction javacript, comment dire a ma fonction que suivant le choix fait, on va chercher les données dans la table ?

Je vous remercie par avance pour vos aides.

Autres pages sur : javascipt apparaitre champs

Lassé par la pub ? Créez un compte
Expert Programmation

Tu peux soit tout faire en javascript (mais c'est vite lourd) ou en Ajax (ce qui évite d'avoir tous les tableaux chargés dans ta page au départ).
Et un petit détail: n'utilise pas des id littéraux mais plutôt numériques dans ton select, surtout si tu as des caractères du type "&".

Merci pour ta réponse crazycat@id

en gros je voyais la chose comme ceci, si le client choisi dans la liste déroulante "rock" alors la fonction javascript fait apparaitre le champs groupe, et suivant le choix du style, je fais en php :

  1. if(isset($_POST['rock']))
    

  2. {
    

  3.  //je fais appel a la bdd pour récupérer les données
    

  4. }


et ainsi de suite...

C'est juste comme ceci ? ou aurez tu une meilleur solution ?
Expert Programmation

Ok, ce serait donc de l'ajax.
Donc, il te faut une fonction JS à appeler sur le onchange, à laquelle tu passes l'id seléctionné, et qui appelle une page php qui te renverra soit directement le code html du select suivant, soit un tableau (JSON ?) des éléments à mettre dans le select.

Pour te simplifier la vie, oriente toi tout d'abord vers un framework JS pour faire très simplement la partie ajax (http://api.jquery.com/jQuery.ajax/). De plus, le framework te permettra de gérer très simplement l'apparition ou la disparition des selects et/ou de leurs contenus.

j'ai trouver se petit script java qui fait que lorsque l'on sélectionne le champs autre, un input text apparait, je peux partire de cela pour réaliser ce que je souhaite ?

  1. <script type="text/javascript">
    

  2. window.onload=function() {
    

  3. 	var $autre = document.getElementById('autre');
    

  4. 	$autre.style.display="none";
    

  5.  
  6. 	document.getElementById('couleurs').onchange=function() {
    

  7. 		$autre.style.display=(this.value == 'autre') ? "inline" : "none";
    

  8. 	};
    

  9. };
    

  10. </script>
    

  11. <select id="couleurs" name="couleurs">
    

  12. 	<option value="rouge">Rouge</option>
    

  13. 	<option value="vert">Vert</option>
    

  14. 	<option value="bleu">Bleu</option>
    

  15. 	<option value="autre">Autre</option>
    

  16. </select>
    

  17.  
  18. <input type="text" id="autre" name="autre" />


Et quel framework me conseil tu d'utiliser ?
Expert Programmation

Ce JS est effectivement la version basique de ce qu'il te faut pour faire apparaitre un champ.
Je te conseille d'utiliser JQuery, entre autres parce que je le connais un peu et que je le trouve plus léger et plus simple à utiliser que prototype.
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde